实现简易 vuedraggable 的拖拽排序功能

一、案例效果

• 拖拽计数4实现手动排序
  
  

二、案例代码

<draggable:list="searchResult.indicator":group="{ name: 'indicators' }"item-key="field"handle=".drag-handle-icon"><divclass="field-item"v-for="(item, index) in searchResult.indicator":key="index"><span>{{ item.name }}（{{ item.field }}）</span><mtd-tooltip content="文字内容" placement="top"><span class="cursor-pointer"><mtd-icon name="warning-circle-o"></mtd-icon></span></mtd-tooltip><mtd-iconname="handle"class="drag-handle-icon cursor-pointer"></mtd-icon></div></draggable><script lang="ts" setup name="DrawerContent">
import { ref } from 'vue';
import Draggable from 'vuedraggable';const searchResult = ref({indicator: [{ name: '计数', field: 'userid1' },{ name: '计数指标', field: 'userid2' },{ name: '计数指标1', field: 'userid3' },{ name: '计数', field: 'userid4' },{ name: '计数2', field: 'userid5' },],polymerize: [{ name: '计数', field: 'userid1' },{ name: '聚合', field: 'userid2' },{ name: '聚合1', field: 'userid3' },{ name: '计数', field: 'userid4' },],
});
</script>

三、总结

1. 将 searchResult 改为响应式数据
2. 为 draggable 组件添加 @end 事件处理器可写入对应逻辑
3. 实现 onDragEnd 方法来更新数据