拖拽draggable

npm install vuedraggable

https://www.itxst.com/vue-draggable/tutorial.html

<template>
    <div>
     <draggable :list="list" @end="onDragEnd" element="ul">
         <li
          v-for="(item, idx) of list"
          :key="idx"
        >{{item.name}}</li>
     </draggable>
   </div>
</template>

<script>    
import draggable from "vuedraggable";

export default {
    components: {
       draggable
    },
    data() {
        return {
          list: []
        };
    },
    methods: {
        // 拖动结束
        onDragEnd(event) {
              const oldIdx = event.oldIndex;
              const newIdx = event.newIndex;
              const num = newIdx - oldIdx;
              if (num === 0) {
                return;
              }
            // 事件处理
        }
    }
}
</script>

表格iview

<template>
    <Table
      :columns="columns"
      :data="list"
      :highlight-row="true"
      :draggable="true"   
      @on-drag-drop="onDragDrop"
    >
     </Table>
 </template>

<script>
  export default {
    data() {
        return {
          list: [],
          columns:[]
        };
    },
    methods: {
        // 拖动结束
        onDragDrop(oldIdx, newIdx) {
          const num = newIdx - oldIdx;
          if (num === 0) {
            return;
          }
          // 事件处理
        }
    }
  }
</script>

补充：
https://github.com/jbaysolutions/vue-grid-layout