Shopify/Draggable/Sortable basic example

look at the events on the console log

by mdhtr

HTML

<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.8/lib/draggable.bundle.js"></script>
<ul class="container">
    <li class="draggable">1</li>
    <li class="draggable">2</li>
    <li class="draggable">3</li>    
</ul>
<ul class="container">
    <li class="draggable">1</li>
    <li class="draggable">2</li>
    <li class="draggable">3</li>    
</ul>
<ul class="container">
    <li class="draggable">1</li>
    <li class="draggable">2</li>
    <li class="draggable">3</li>    
</ul>

JavaScript

var containers = document.querySelectorAll('.container');

var draggable = new window.Draggable.Sortable(containers, {
  draggable: '.draggable'
});

// draggable events
draggable.on('draggable:initialize', (e) => console.log('draggable:initialize', e));
draggable.on('draggable:destroy', (e) => console.log('draggable:destroy', e));
// drag events
draggable.on('drag:start', (e) => console.log('drag:start', e));
draggable.on('drag:move', (e) => console.log('drag:move', e));
draggable.on('drag:over', (e) => console.log('drag:over', e));
draggable.on('drag:over:container', (e) => console.log('drag:over:container', e));
draggable.on('drag:out', (e) => console.log('drag:out', e));
draggable.on('drag:out:container', (e) => console.log('drag:out:container', e));
draggable.on('drag:stop', (e) => console.log('drag:stop', e));
draggable.on('drag:pressure', (e) => console.log('drag:pressure', e));
// mirror events
draggable.on('mirror:create', (e) => console.log('mirror:create', e));
draggable.on('mirror:created', (e) => console.log('mirror:created', e));
draggable.on('mirror:attached', (e) => console.log('mirror:attached', e));
draggable.on('mirror:move', (e) => console.log('mirror:move', e));
draggable.on('mirror:destroy', (e) => console.log('mirror:destroy', e));
// sortable events
draggable.on('sortable:start', (e) => console.log('sortable:start', e));
draggable.on('sortable:sort', (e) => console.log('sortable:sort', e));
draggable.on('sortable:sorted', (e) => console.log('sortable:sorted', e));
draggable.on('sortable:stop', (e) => console.log('sortable:stop', e));