Help with Drag and Drop Functionality in UXP Plugin for InDesign

InDesign
1

Hello Adobe InDesign Community,

I’m currently developing a plugin using the UXP template for React, and I’m encountering an issue with implementing drag-and-drop functionality. I’m fairly new to plugin development, and any guidance would be greatly appreciated.

Objective: My goal is to allow users to select an object (like a rectangle) from the active document, drag it into a panel, and drop it onto a div element within my React component. Once dropped, the component should capture and display the ID of the dragged element.

Current Implementation:

  • Click Event Handling: I can successfully retrieve the ID of a selected object through a click event and update the state as shown below:

const handleClick = () => { const selected = app.selection; const allSelectedIds = selected.map((item) => item.id); setIds(allSelectedIds); };

This approach works perfectly for capturing the IDs of selected objects, however, the same function in the drop event does not work.

  • Drag and Drop Issues:
    • When attempting to drag an object from the InDesign document to the panel, the cursor turns to a “forbidden” indicator.
    • Drag and drop does not work at all, even for elements within the panel itself.
    • The onDragStart on elements inside my panel event almost triggers correctly (it does show console logs but does not update state correctly) but no other drag-related events (like onDragOver or onDrop) trigger any response—even a simple console log.

Troubleshooting Done:

  • Tested the drag and drop in a standard web application context with other types of information, and it functions as expected.
  • The issue seems specific to the interaction between the InDesign document environment and the UXP panel.

Questions:

  1. Are there specific restrictions or configurations in the UXP environment that I might be missing for drag and drop?
  2. Could this issue be related to how InDesign handles drag and drop interactions with external panels?
  3. Any examples or guidance on how to properly implement drag and drop in this context would be immensely helpful.

I would greatly appreciate any insights or suggestions on how to resolve these issues. Thank you in advance for your time and help!

2

I wasn’t aware that UXP support for Adobe InDesign supported drag and drop either way (neither to nor from a panel).

jsw

3

Sorry you had to post in both forums.

InDesign hasn’t implemented drag and drop for UXP yet, I checked with engineering.

… I also asked if it was on their roadmap, but haven’t got a reply. @Shruti ?

4

Hello! Thank you for the feedback! Have you found out if they are going to try and add it, @Shruti ? At least basic functionality of capturing drop events on the panels HTML—the actual item information can be captured from the selected items InDesign already offers, like in the click event I described.

It might be interesting to investigate because we were able to use drag and drop using the CEP on the previous version of our plugin, and now that we are migrating to UXP, we would like to maintain that functionality because users really seemed to enjoy it and find it useful.