JSFiddle - React, Tailwind, and code Playground

by InsaniManES

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<sortable-list></sortable-list>

CSS

#sortable {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 60%;
}

#sortable li {
  font-family: Arial;
  margin: 0 3px 3px 3px;
  padding: 0.4em;
  padding-left: 1.5em;
  font-size: 1.4em;
  height: 18px;
}

#sortable li span {
  float: right;
  cursor: pointer
}

JavaScript

var sortableList = Vue.extend({
   template: '<ul id="sortable"><li v-for="item in list"><div class="ui-state-default">{{item.title}} {{item.id}}</div></li></ul>',
   data: function() {
     return {
       list: [{ id: 1, title: "Item"},
       				{ id: 2, title: "Item"},
              { id: 3, title: "Item"},
              { id: 4, title: "Item"},
              { id: 5, title: "Item"}]
     }
   }
 });

 new Vue({
   el: 'body',
   ready: function() {
     $("#sortable").sortable();
     $("#sortable").disableSelection();
   },
   components: {
     sortableList
   },
 });