Using an array of objects with SortableContext

[MattHeslington]

Hello,
Great library!
Is it possible to use an array of objects with SortableContext? If so, how, please? I have tried the solution mentioned in #121 but can't get it to work - the images wont drag at all.

I have a sortable list of images, uploaded by the user, at the moment comprising an array of data:image base64s. I would like to be able to use an array of objects with SortableContext as I need the file object to upload to AWS S3 after the images have been sorted

This is my current code, using dataOne - I would like to be able to use dataTwo:

const dataOne = ['data:image/png;base64..1..', 'data:image/png;base64..2..', 'data:image/png;base64..3..', 'data:image/png;base64..4..', 'data:image/png;base64..5..']

const dataTwo = [
    { id: '1', file: '/image-1.png', src: 'data:image/png;base64..1..' },
    { id: '2', file: '/image-2.png', src: 'data:image/png;base64..2..' },
    { id: '3', file: '/image-3.png', src: 'data:image/png;base64..3..' },
    { id: '4', file: '/image-4.png', src: 'data:image/png;base64..4..' },
    { id: '5', file: '/image-5.png', src: 'data:image/png;base64..5..' },
]

const UploadGallery = () => {
    const [previewImages, setPreviewImages] = useState(dataOne)
    const sensors = useSensors(useSensor(MouseSensor), useSensor(TouchSensor))

    return (
            <DndContext
                sensors={sensors}
                collisionDetection={closestCenter}
                onDragStart={handleDragStart}
                onDragEnd={handleDragEnd}
                onDragCancel={handleDragCancel}>
                <SortableContext items={previewImages} strategy={rectSortingStrategy}>
                    <div className='grid grid-cols-4 gap-5'>
                        {previewImages.map((url, index) => (
                            <SortablePhoto key={url} url={url} index={index} />
                        ))}
                    </div>
                </SortableContext>
            </DndContext>
    )

    function handleDragStart(event) {
        setActiveId(event.active.id)
    }

    function handleDragEnd(event) {
        const { active, over } = event

        if (active.id !== over.id) {
            setPreviewImages((previewImages) => {
                const oldIndex = previewImages.indexOf(active.id)
                const newIndex = previewImages.indexOf(over.id)
                
                return arrayMove(previewImages, oldIndex, newIndex)
            })
        }

        setActiveId(null)
    }

    function handleDragCancel() {
        setActiveId(null)
    }
}

I have tried doing something like:

                <SortableContext items={previewImages.map((image) => image.id)} strategy={rectSortingStrategy}>
                    <div className='grid grid-cols-4 gap-5'>
                        {previewImages.map((image, index) => (
                            <SortablePhoto key={image.src} url={image.src} index={index} />
                        ))}
                    </div>
                </SortableContext>

This is the SortablePhoto component:

export const SortablePhoto = (props) => {
    const sortable = useSortable({ id: props.url })
    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} />
}

Many thanks for any help or advice.
Cheers, Matt

[pstrassmann]

You can definitely use arrays of objects for the items in SortableContext. You can see that being done here: https://codesandbox.io/s/22x1ix?file=/src/App.tsx. If you could make a quick codesandbox mocking/replicating the problem I would be happy to try to help debug.

[pstrassmann]

Hi Matt,

Thanks for the codesandbox, that was very helpful.

I believe your issue has to do with this requirement (from the docs): "The argument passed to the id argument of useSortable should match the id passed in the items array of the parent SortableContext"

Basically, whatever you set as the value of id for each object in items needs to match the value of id you use when you call useSortable

Right now when you call useSortable in SortablePhoto, you are using useSortable({id: props.url}). However your id in items is not also url but is instead id. So to fix this you could change your useSortable to read useSortable({id: props.id}) (although you currently are not passing id as a prop to SortablePhoto). Another way to fix this would be to set the value of id in items to url.

I hope this helps!

Patrick

[MattHeslington]

Hi Patrick,

Many thanks for all your help with this.

I have updated the sandbox above to reflect your suggestions, but unfortunately the sortable items don't anchor to their new position after being dragged. It's an issue with the 'oldIndex' and 'newIndex' being assigned in the 'handleDragEnd' function. The console shows that on each drag-end, both the 'oldIndex' and 'newIndex' are -1.

Have I applied your suggested changes correctly?

Kind regards and thanks again,
Matt

[pstrassmann]

Hi Matt,

Yes the changes re not being able to drag appear to be fixed.

As for the onDragEnd handler, <array>.indexOf(...) returns -1 when the element passed to indexOf is not found in the array. As it is being used in the codeSandBox,items is an array of objects, so it makes sense that indexOf cannot find active.id (string) within the items array.

You can resolve this issue by replacing the use of <array>.indexOf with <array>.findIndex(). findIndex will iterate through the array and return the index of the first element to match a condition.

So in your onDragEnd handler, replace the use of indexOf with:

                const oldIndex = items.findIndex((photo) => photo.id === active.id)
                const newIndex = items.findIndex((photo) => photo.id === over.id)

Let me know if this doesn't fix things.

Patrick

[MattHeslington]

Hello Patrick,

That's fantastic. Thank you for all your help here, and for teaching me some new things too. I really appreciate it.
Cheers,
Matt

[pstrassmann]

Happy to help!