Draggable HTML Elements in Panel

[alex.jennings]

I am testing the PProPanel and am not able to drag the div "Drag and drop import" (running v15.2.0).

https://github.com/Adobe-CEP/Samples/blob/master/PProPanel/index.html#L418

It seems that adding draggable="true" doesn't seem to work on any elements I have tried so far.

I saw a mention of this on the Known Issues but I do not have the chrome inspect window open (and following the instructions doesn't make any difference). 

https://github.com/Adobe-CEP/CEP-Resources/blob/master/CEP_11.x/Documentation/Issues.md#issue-3--dra...

Is there anything further I can do to debug this?

[bbb_999]

Mac, win, or both?

I see drag-n-dropping the blue "Drag and drop import" component successfully import a picture of my daughter (with an actual sharpened claymore!), on mac, 15.2 and 15.4. [will try windows later]

[alex.jennings]

OK, I now understand what the code is supposed to be doing, it looks my issue is that the drag target is not being shown under the pointer while dragging.  You can recreate with the example and compare a desktop browser to CEF https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/setDragImage#example (you can skip setting the image and still see how the behaviour differs).

Perhaps this is a limitation of the panel?  I was looking at just using the draggable attribute for elements self-contained within the panel, not dropping elsewhere in the application. 

[Bruce Bullis · Accepted solution]

> Perhaps this is a limitation of the panel?

I concur, I think this is a CEP limitation.

When a user drag-n-drops something from a panel PPro can display at least three different behaviors, depending on where the drop lands (which the panel cannot know):

Project panel:

Media is imported to the project...at the project root, OR into the bin on which the user dropped it.

Source Monitor:

Media is opened in the Source monitor, and NOT added to the project

Timeline panel:

Media is imported to the project, added to a new sequence (PPro makes educated guesses based on the media).

Rather than adopt the uncertainty [above], many panel developers avoid drag-n-drop entirely, and instead adopt a "select N assets then click an import button to import them all" workflow. 

When that Import button is clicked, for each asset, a panel can:

• Imports the media into the project, into whatever bin the panel likes (creating bins as desired).
• Sets the in/out points of the media.
• Sets the metadata of the media, including markers.
• Optional: Name the project item with a human-readable name, rather than just the file name. 
• Optional: Create a new sequence (with correct settings), and insert media into it.

While we know drag-n-drop is popular with users, the workflow [above] provides much greater control.