Vue3拖拽 - vuedraggable与sortable的使用

原创已于 2022-02-18 16:31:31 修改 · 3.9k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

于 2022-02-18 16:25:49 首次发布

vue 专栏收录该内容

16 篇文章

订阅专栏

本文探讨了在遇到打包错误后，如何从vuedraggable转向Sortable.js解决Vue项目中的两列表拖拽问题。作者分享了案例、弃用原因和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);

  
},