How to implement a simple delete button?

[MattHeslington]

Hello,

Thank you for the great library. I've been able to build an sortable image grid. I just need now to be able to add a button to each image container which removes the item from items array. I've searched everywhere, looked through so many codesandboxes and github repos, with no luck.

This is my DndContext:

<DndContext
    sensors={sensors}
    collisionDetection={closestCenter}
    onDragStart={handleDragStart}
    onDragEnd={handleDragEnd}
    onDragCancel={handleDragCancel}>
    <SortableContext items={items.map((item) => item.id)} strategy={rectSortingStrategy}>
        <div className='grid w-full grid-cols-5 gap-5 overflow-hidden overflow-y-auto'>
            {items?.map((item, index) => (
                <SortablePhoto
                    key={item.id}
                    url={item.src ? item.src : item.url}
                    index={index}
                    id={item.id}
                    // removable
                    // onRemove={() => setItems((items) => items.filter((itemId) => itemId !== id))}
                />
            ))}
        </div>
    </SortableContext>
</DndContext>

My SortablePhoto component looks like this:

import { useSortable } from '@dnd-kit/sortable'
import { CSS } from '@dnd-kit/utilities'

import { Photo } from 'components/add/photo'

export const SortablePhoto = (props) => {
    const sortable = useSortable({ id: props.id })
    const { attributes, listeners, isDragging, setNodeRef, transform, transition } = sortable

    const style = {
        transform: CSS.Transform.toString(transform),
        transition,
    }

    return <Photo ref={setNodeRef} style={style} {...props} {...attributes} {...listeners} />
}

While the actual photo component with the remove button is as so:

export const Photo = forwardRef(({ url, index, faded, onRemove, style, ...props }, ref) => {
    const inlineStyles = {
        ...
        position: 'relative',
        ...style,
    }

    return (
        <div ref={ref} style={inlineStyles} {...props}>
            <button className='absolute top-0 right-0 grid h-[16px] w-[16px] place-content-center bg-black text-white' onClick={onRemove}>
                x
            </button>
        </div>
    )
})

Photo.displayName = 'Photo'

I see on the official Storybook there's an example showing removable items in the examples/pages section, and looking at the code there's an 'onRemove' function - but I just can't get it to work - can anyone see what I'm doing wrong please?

Many thanks for any help - Matt

[nprange-philips]

Hello Matt, if you are unable to click the button to call the onRemove method, you can set a delay to the drag event, this way, the user has to press the mouse button for a certain time before the drag event starts. This way, you are able to click buttons.
Or you can put a drag handle and set the {...listener} to it.
If none that I said suits you, as far as I see your code, it is in the right approach.

[MattHeslington]

Thanks for the reply Nicolas, much appreciated. I've added a delay to the drag event but that doesn't seem to work. I'll try the drag handle approach and report back.
Thanks again.