Forum Discussion
Enable Submit Button After Drag Action in Default Sequence Drag-and-Drop
Unfortunately, Storyline doesn’t offer built-in control to detect when draggable objects have been moved out of their original container in this type of interaction. However, you can handle this using JavaScript. By targeting the draggable elements directly, you can monitor when they are dragged out of their container and trigger an action — for example, updating a Storyline variable. That variable can then be used within Storyline to change the state of a button.
Execute JavaScript when the timeline starts on this slide:const container = document.querySelector('.sequence-ctrl-scroll-area-contents'); const checkInterval = setInterval(() => { const draggableItems = document.querySelectorAll('.sequence-ctrl-drag-container'); let anyOutside = false; draggableItems.forEach(item => { if (!container.contains(item)) { anyOutside = true; } }); if (anyOutside) { clearInterval(checkInterval); console.log('Item moved out of container. Enabling Submit.'); setVar('submitEnabled', true); } }, 300);Set state of Submit to "Normal" when variable "submitEnabled" changes to true. See the attached example.
Nedim, thank you so much for jumping in and sharing the JavaScript solution — it worked perfectly!
Appreciate your help and expertise — you saved me a lot of time!
No problem, you are welcome!
Try this:
const shuffleGroup = document.querySelector('.slide-object.slide-object-shufflegroup.shown'); const checkInterval = setInterval(() => { const dragItems = document.querySelectorAll('.slide-object.slide-object-dragitem.shown'); let anyOutside = false; dragItems.forEach(item => { if (!shuffleGroup.contains(item)) { anyOutside = true; } }); if (anyOutside) { clearInterval(checkInterval); console.log('At least one drag item is outside the shuffle group.'); setVar('submitEnabled', true); } }, 300);Thank a lot Nedim.