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' }
        ]
    },
    ready: function() {
	    var self = this;
      var from = null;
      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);
        from = index;
      })

      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);

				self.entries.splice(index, 0, self.entries.splice(from, 1)[0]);

        console.log('Vue thinks order is:', 
            playlist.entries.map(e => e.title ).join(', ')
        );
      })
	}
});