Dragula -> Shopify/Draggable migration aid

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>

CSS

.container {
  border: 1px lightgray dashed;
  min-height: 2em;
}

.draggable-source--is-dragging {
  opacity: 0.2;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
  filter: alpha(opacity=20);
}

.draggable-mirror {
  opacity: 0.8;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  filter: alpha(opacity=80);
}

JavaScript

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

(function revertOnSpill() {
  var outContainer;
  draggable.on('drag:out:container', (e) => {
    outContainer = e.data.overContainer;
  });
  draggable.on('sortable:stop', (e) => {
    var newContainer = e.data.newContainer;
    var spill = outContainer && outContainer === newContainer;
    if (spill) {
      var oldContainer = e.data.oldContainer;
      var oldContainerChildren = draggable.getDraggableElementsForContainer(oldContainer);
      var emptyOldContainer = !oldContainerChildren.length;
      var source = e.data.dragEvent.data.source;
      if (emptyOldContainer) {
        oldContainer.appendChild(source);
      } else {
        var oldIndex = e.data.oldIndex;
        oldContainer.insertBefore(source, oldContainer.children[oldIndex]);
      }    
    }
  });
})();


/* // 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',...