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:
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:
Are there specific restrictions or configurations in the UXP environment that I might be missing for drag and drop?
Could this issue be related to how InDesign handles drag and drop interactions with external panels?
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!
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.
I’m checking in ~2 years later: the same HTML5 drag/drop flow I rely on in Photoshop UXP still doesn’t line up in InDesign UXP in my builds (dragover, dragenter, dragleave, drop never fire), so this remains a blocker for porting Configurator Reloaded to InDesign.
Any update on implementation status or roadmap for panel drag/drop in InDesign UXP? @Erin_Finnegan
@tomzag I’m not very familiar with this field, but InDesign also supports WebView, if I recall correctly. Would using that work around the limitations?
While it may be technically possible (I’m not sure), I’d rather not go down this path, for a few reasons:
I’ve put significant effort into implementing the UI and functionality within lightweight UXP, and I’d like to build on that foundation.
I want to avoid spawning additional processes/threads via webview — these host apps already consume considerable resources.
Ideally, I’d like a shared underlying structure across PS and ID, so that most of the code can be reused and updates can be rolled out to both more easily.
