JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.6.4/dragula.min.js"></script>
<div id="playlist">
    <div v-for="entry in entries">
        {{ entry.title }}
    </div>
</div>

CSS

.gu-mirror{position:fixed!important;margin:0!important;z-index:9999!important;opacity:.8;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";filter:alpha(opacity=80)}.gu-hide{display:none!important}.gu-unselectable{-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.gu-transit{opacity:.2;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";filter:alpha(opacity=20)}

JavaScript

var playlist = new Vue({
    el : '#playlist',
    data : {
        entries : [
            { title : 'Oh No' },
            { title : 'Let it Out' },
            { title : 'That\'s Right' },
            { title : 'Jump on Stage' },
            { title : 'This is the Remix' }
        ]
    }
});

var drake = dragula([document.querySelector('#playlist')]);

drake.on('drag', function(element, source) {
  var index = [].indexOf.call(element.parentNode.children, element);
	console.log('drag from', index, element, source);
})

drake.on('drop', function(element, target, source, sibling) {
  var index = [].indexOf.call(element.parentNode.children, element)
	console.log('drop to', index, element, target, source, sibling);
  
  console.log('Vue thinks order is:', 
  		playlist.entries.map(e => e.title ).join(', ')
  );
})