Dragula basic example

by mdhtr

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.2/dragula.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

/* CONTENT OF https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.2/dragula.css */
.gu-mirror {
  /* added to the mirror image */
  position: fixed !important;
  margin: 0 !important;
  z-index: 9999 !important;
  opacity: 0.8;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  filter: alpha(opacity=80);
}
.gu-hide {
  /* a helper class to apply display: none */
  display: none !important;
}
.gu-unselectable {
  /* added to the mirrorContainer element when dragging */
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}
.gu-transit {
  /* added to the source element when its mirror image is dragged */
  opacity: 0.2;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
  filter: alpha(opacity=20);
}

JavaScript

var containers = Array.prototype.slice.call(document.querySelectorAll('.container'));

var drake = window.dragula(containers, {
	revertOnSpill: true
});

drake.on('drag', (el, source) => console.log('drag', el, source));
drake.on('dragend', (el) => console.log('dragend', el));
drake.on('drop', (el, target, source, sibling) => console.log('drop', el, target, source, sibling));
drake.on('cancel', (el, container, source) => console.log('cancel', el, container, source));
drake.on('remove', (el, container, source) => console.log('remove', el, container, source));
drake.on('shadow', (el, container, source) => console.log('shadow', el, container, source));
drake.on('over', (el, container, source) => console.log('over', el, container, source));
drake.on('out', (el, container, source) => console.log('out', el, container, source));
drake.on('cloned', (clone, original, type) => console.log('cloned', clone, original, type));