[BUG] None of the drag events work in dialogs except `dragstart`

Photoshop
, , ,
1

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 { useCallback } from "react"

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

        return false
    }, [])

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

        return false
    }, [])

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

        return false
    }, [])

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

        return false
    }, [])

    const onDragStart = useCallback((e) => {
        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:

1 Like
2

GIF 24.12.2024 15-54-06

Hello! I have a plugin for Photoshop that includes two panels, both of which have drag-and-drop functionality. On Windows 10 and 11, everything works fine, but on macOS 13.4, only the dragstart function works, while dragover and drop do not trigger. I can’t figure out the reason.

3

Could it be, that on MacOS panels behave more like dialogs in Windows in this case? :thinking:

4

Urethane Can you kindly give me some links to learn about the dragstart function, I tried something but it doesn’t work on the plugin panel.

6

Yes, I agree with you. It only works in panels and only on Windows.

Unfortunately, I cannot provide any links. The plugin I’m developing in React TypeScript is still in progress. You can test the dragstart functionality by using the ui-react-starter example from:

and creating a component using the code provided by Karmalakas earlier in the discussion.

1 Like
7

One question, to make dragstart work, do I have to put some permissions in the manifest file? I use vanilla, no react.

8

I haven’t tried it with vanilla. As for react, I didn’t specify anything in the manifest file.

1 Like
9

@Erin_Finnegan, sorry to ping directly, but could someone take a look at this? It’s been years since my plugin users are asking for a feature, which requires drag events to work in dialogs. I would’ve implemented it from the very beginning, but it never worked. Also I’ve seen quite a few posts about this here on the forum…

I believe the feature is already in both UXP and Photoshop, but there’s something missing for it to work in dialogs on Windows and everywhere on MacOS :thinking:

10

I reported the bug with drag & drop not working in dialogs to @indranil on October 16, 2024.
In a later meeting, I asked him specifically about this and he said that he had received the report. I have no further information if and when this will be fixed.

1 Like
11

I would love drop support in the main UXP panel, to allow the user to drag documents onto a plugin to be processed. Would be a great time saver for many workflows vs using folder pickers.

3 Likes
12

@Karmalakas no problem.

This makes the thread soound like a feature request, but as far as I can tell, isn’t this a bug? Please correct me if I’m wrong.

Also pinging @indranil

13

I believe it might be a bug (hence the topic title), because in panels all events work on Windows, but not on MacOS. In dialogs only dragstart works both on Windows and on MacOS (@uretan, please correct me if I’m wrong about MacOS)

So, unless events not working in dialogs was by design, it’s a bug :thinking:

14

I have tested it multiple times. On Windows, drag-and-drop works fully only in panels, but not in dialog windows. On macOS, only the dragstart event works, and even then, only in panels. The drop event doesn’t trigger at all. If the event works on Windows but not on macOS, I consider this a bug. Fortunately, my project is built with React and Redux Toolkit, and thanks to state management, I was able to work around the absence of the drop event.
I also agree with @Karmalakas that this is a bug

1 Like