JSFiddle - React, Tailwind, and code Playground

by alekzonder

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.4.2/Sortable.min.js"></script>
<div id="app">
  <dragdrop></dragdrop>
</div>

<template id="dragdrop">
  <ul id="sort" class="sort cf">
    <li class="sort-item" order="{{ item.order }}" v-for="item in list">
      {{ item.name }} - ({{ item.order}})
    </li>
  </ul>
</template>

CSS

ul.sort {
  list-style: none;
  padding: 0;
  margin: 30px;
}

li.sort-item {
  padding: 10px;
  width: 25%;
  float: left;
  margin: 0 10px 10px 0;
  background: #EFEFEF;
  border: solid 1px #CCC;
}

.sort-ghost {
  opacity: 0.3;
  transition: all 0.7s ease-out;
}

JavaScript

new Vue({
  el: '#app',
  template: '#dragdrop',
  data() {
    return {
      list: [
      	{name: 'Item 1', id: 1, order: 0}, 
        {name: 'Item 2', id: 2, order: 1}, 
        {name: 'Item 3', id: 3, order: 2}, 
        {name: 'Item 4', id: 4, order: 3}, 
        {name: 'Item 5', id: 5, order: 4}, 
        {name: 'Item 6', id: 6, order: 5}, 
       ],
    }
  },
  ready() {
  	var vm = this;
    Sortable.create(document.getElementById('sort'), {
      draggable: 'li.sort-item',
      ghostClass: "sort-ghost",
      animation: 80,
      onUpdate: function(evt) {
        console.log('dropped (Sortable)');
        vm.reorder(evt.oldIndex, evt.newIndex);
    	}
    });
  },
  methods: {
    reorder(oldIndex, newIndex) {
      // move the item in the underlying array
      this.list.splice(newIndex, 0, this.list.splice(oldIndex, 1)[0]);
      // update order property based on position in array
      this.list.forEach(function(item, index){
        item.order = index;
      });
    }
  }
});