Is there a working sortable library for React?

Photoshop UXP Plugin API
, , , ,
1

I noticed this post, so I understand it should work, but I didn’t test it yet. But I tried this SortableJS library and it didn’t work. No errors, nothing happens :confused: I just saw this post from 2019 asking the same thing for Adobe XD… :frowning:

Anyone have any suggestions?

2

I couldn’t find one. In the end, I implemented it myself.

1 Like
3

Sounds like I’ll have to go that way too :pensive:

4

I’ve spent 2 days trying to figure out what’s wrong… Only dragstart fires and none of the other events do. What I’ve found, all events fire while on a panel, but only dragstart while on a dialog :confused:

Here’s the simplest React Component to try:

import { DragEvent, useCallback } from "react"

const SortableTest = () => {
    const onDragEnter = useCallback((e: DragEvent) => {
        console.log("onDragEnter: ", e)
        e.stopPropagation()
        e.preventDefault()

        return false
    }, [])

    const onDragOver = useCallback((e: DragEvent) => {
        console.log("onDragOver: ", e)
        e.preventDefault()
        e.stopPropagation()

        return false
    }, [])

    const onDragLeave = useCallback((e: DragEvent) => {
        console.log("onDragLeave: ", e)
        e.stopPropagation()
        e.preventDefault()

        return false
    }, [])

    const onDrop = useCallback((e: DragEvent) => {
        console.log("onDrop: ", e)
        e.preventDefault()

        return false
    }, [])

    const onDragStart = useCallback((e: DragEvent) => {
        console.log("onDragStart: ", e)
        e.preventDefault()
        e.dataTransfer.effectAllowed = "move"
        e.dataTransfer.dropEffect = "move"

        return false
    }, [])

    return <div style={{padding: "1em", margin:"1em"}}>
        {["a", "b", "c"].map((id) => {
            return <div
                draggable={true}
                key={`_${id}`}
                onDragStart={onDragStart}
                onDragLeave={onDragLeave}
                // onDragEnter={onDragEnter}
                // onDragOver={onDragOver}
                // onDrop={onDrop}
                style={{ padding: "0.5em", margin: "0.5em", fontSize: "1em", backgroundColor: "grey" }}
            >
                Drag me
            </div>
        })}
    </div>
}

export default SortableTest

Render it on a panel and all is fine. Render on a dialog and only dragstart is fine :frowning:

5

I’ve played a bit more, but it seems to me like a bug. Created a separate topic for it: