Vue3拖拽 - vuedraggable与sortable的使用

本文主要是介绍Vue3拖拽 - vuedraggable与sortable的使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、参考文档

Demo地址：https://sortablejs.github.io/vue.draggable.next/#/two-lists
github说明文档：https://github.com/SortableJS/vue.draggable.next

二、vuedraggable使用案例：

draggable 内不可以加class

 <draggable v-model="dataList"  :animation="1000" :forceFallback="true"item-key="id"ghost-class="ghost"group="template" tag="transition-group"@change="onMoveCallback"><template #item="{element, index}"><div>{{ element.name }}</div></template></draggable?

三、弃用vuedraggable

原因：打包后报错，找不到原因，改用sortable，弃用vuedraggable
一度以为是安装版本的事，卸载后重装与vue3匹配的版本，依然报错

cnpm i -S vuedraggable@next

四、sortableJs使用

若导入sortable找不到文件路径(如下图，会出现...)： Could not find a declaration file for module 'sortablejs'，
则需安装 cnpm i --save @types/sortablejs
在这里插入图片描述

// 安装方法
cnpm install sortablejs --save
cnpm i --save @types/sortablejs// 使用，具体例子见官网
import Sortable from 'sortablejs'

<div id="itxst" @click="moveExp(list)"><div v-for="item in list" :key="item.id">...</div>
</div>

moveExp(arr){//获取对象let el = document.getElementById('itxst');//设置配置let ops = {animation: 150,ghostClass:"ghost",chosenClass: "ghost",dragClass: "ghost",handle:'.move-target',//拖动结束onEnd: function ({ newIndex, oldIndex }) {if(newIndex==oldIndex){return false;}else{//获取拖动后的数组let arr = JSON.parse(JSON.stringify(dataSet.keyClassifyArr));const currRow = arr.splice(oldIndex, 1)[0];arr.splice(newIndex, 0, currRow)// 重置order,并请求后端进行保存let obj = {};let len = arr.length;for(let i=0; i<len; i++){obj[arr[i].id] = i+1}methods.saveTempOrder(obj);}},};//初始化Sortable.create(el, ops);},