vue3中使用sortable.js实现交换组件且不影响其他元素位置

Yiboo_Sean

已于 2023-10-23 10:00:46 修改

阅读量559

点赞数

文章标签： javascript 前端

于 2023-10-23 09:44:31 首次发布

本文链接：https://blog.csdn.net/Yiboo_Sean/article/details/133982352

版权

官方文档：http://www.sortablejs.com/

1.安装插件

npm install sortablejs

2.引入

// import Sortable from 'sortablejs';
import Sortable from 'sortablejs/sortable.js';

3.初始化

Sortable.create(el, {
  animation: 200,
  handle: '.img-item',
  swap: true, //启用交换插件
  swapClass: 'img-swap',//应用于悬停的交换项的class，不带.
  onEnd: (evt: { oldIndex: any; newIndex: any; }) => {
    // 通过index更改数据，获取拖拽排序之后的数据
    const changeData = checkList.value.splice(evt.oldIndex || 0, 1)
    checkList.value.splice(evt.newIndex || 0, 0, changeData[0])
  }
});

注：第一种引入方式默认引入 .min.js文件，配置不生效