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:
- 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!
1 Correct answer
3
Replies
AdChoices