Swappable:swap cancel async

Author: BuffeleCreated Feb 28, 2024Updated Nov 2, 2025

Is it possible to cancel or delay the swappable swap event?

I'd like to implement swapping, doing an ajax call, depending on the result, success -> continue with swapped, failure, revert the swapping or rather not let it continue. For now event.cancel(); only seems to work with a synchronous call.

javascript

function delay(t, val) {
    return new Promise(resolve => setTimeout(resolve, t, val));
}

const containers = document.querySelectorAll('#container');

if (containers.length === 0) {
    return false;
}

const swappable = new Draggable.Swappable(containers, {
    draggable: '.Block--isDraggable',
    mirror: {
        constrainDimensions: true,
    },
    plugins: [Draggable.Plugins.ResizeMirror],
});

swappable.on('swappable:swap', async (e) => {
    await delay(1000);  
    e.cancel(); // Does not work anymore
    console.log('Swap');
});

Source: Shopify/draggable

View original on GitHub View discussion on GitHub