Forum Discussion
Enable Submit Button After Drag Action in Default Sequence Drag-and-Drop
Hi everyone,
I'm working with the default Sequence Drag-and-Drop interaction in Articulate Storyline (not a converted freeform slide).
I’ve added a custom Submit button, and I want to achieve the following:
- Disable the Submit button when the timeline starts.
- Enable the Submit button only after at least one (or all) items have been dragged and dropped.
I’ve tried using motion-based triggers and variables, but since this is the default Sequence DnD and not a freeform, the standard drag-drop triggers don’t seem to apply.
Has anyone successfully implemented this kind of interaction? Is there a workaround or JavaScript-based solution for this?
Appreciate any ideas or sample files. Thanks in advance!
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.
6 Replies
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.