Welcome Dialog

Welcome to the Community!

We have a brand new look! Take a tour with us and explore the latest updates on Adobe Support Community.


Draggable HTML Elements in Panel

New Here ,
Jul 07, 2021 Jul 07, 2021

Copy link to clipboard

Copied

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?

TOPICS
SDK

Views

86

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Adobe Employee , Jul 22, 2021 Jul 22, 2021
> 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 imp...

Likes

Translate

Translate
Participant ,
Jul 20, 2021 Jul 20, 2021

Copy link to clipboard

Copied

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]


Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jul 21, 2021 Jul 21, 2021

Copy link to clipboard

Copied

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. 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Jul 22, 2021 Jul 22, 2021

Copy link to clipboard

Copied

LATEST
> 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.
 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines