拖拽draggable

npm install vuedraggable

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

表格

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