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.