JSFiddle - React, Tailwind, and code Playground

by cheongjin kim

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.2/vue.js"></script>
<script src="https://cdn.jsdelivr.net/sortable/1.4.2/Sortable.min.js"></script>
<script src="https://cdn.rawgit.com/David-Desmaisons/Vue.Draggable/master/dist/vuedraggable.min.js"></script>
<div>

    <script type="text/x-template" id="tab">
      <table>
      <thead>
        <tr>
          <th>Actual table with tr/td tags</th>
        </tr>
      </thead>
      <draggable v-model="list" element="table" :options="{items: 'tbody'}">
       	<tbody>
	        <tr v-for="(person, index) in list" :key="person">
   		      <local-td :item="person"></local-td>
	  	    </tr>
  	    </tbody>
      </draggable>
    </table>
    </script>
    
     <script type="text/x-template" id="tr">
			<td>{{item.name}}</td>
    </script>

  <div id="app">
     <local-table v-model="people"></local-table>
  </div>
  
  </div>

CSS

table{ border: 1px solid black; margin: 2em; }

JavaScript

var localTd = {
  template: '#tr',
  props: ['item'],
  name: 'local-td'
};

var localTable = {
  components:{
    localTd:localTd
  },
  template: '#tab',
  props: ['value'],
  name: 'local-table',
  computed: {
    list: {
        get() {
            return this.value
        },
        set(value) {
            this.$emit('input', value)
        }
    }
	}
};

new Vue({
  components:{
  	localTable:localTable
  },
  el: '#app',
  data: {people: [
        {name: "Abby"},
        {name: "Brooke"},
        {name: "Courtenay"},
        {name: "David"}
      ],
    }

})