dragula/plain-draggable拖拽排序的另一种选择

先把调研结果说在前面,因为列表是flex不定高度的布局,
dragula的兼容性没有sortablejs好,环境是在vue3.0项目中使用的
下面是其他拖拽排序的方案,dragula封装的功能比较多,plain-draggable库封装的功能不多,

先上dragula使用代码

npm install dragula @types/dragula
//"dragula": "^3.7.3",
//"@types/dragula": "^3.7.1",
// package.json
npm install dragula
//"dragula": "^3.7.3",
// package.json

/*上面是安装命令*/
import dragula from 'dragula';
// import type { Draggable } from 'dragula';  这次不用ts
const container = this.$refs.dragulaContainer;
        const drake = dragula([container], {
            containers: [container],
            invalid: function (el) {
                return el.classList.contains('ignore-elements');
              }
        });
    
        drake.on('drop', (el, target, source, sibling) => {
          console.log('Element dropped!',el.index, target, source, sibling);
        });
// 注意监听的方法中传入的是el元素,配合框架使用时需要先将index渲染时放入属性,再拿取监听
// option还支持copy等选项,详见readme.md

再来plain-draggable库

注意两点
1.npm安装需要自行安装依赖cd node_modules/plain-draggable npm i;或者直接在项目中依次npm install 4个依赖
2.demo代码在网站源码中,自行右键查看网页源代码

plain-draggable初始化时绑定的元素并不是含有list的容器,这点要区分,可拖动的类名class自行在元素中直接添加即可
plain-draggable偏向容器内自由拖动,列表拖动排序需要自己写排序功能,
而且业务中的item有抽屉效果,按demo需要重新算高度,

demo网址
github网址

demo讲解

demo结构
class=“ex-230-item draggable cat”*5// 5个此元素组成列表
cat是修改了默认类名’plain-draggable’
PlainDraggable.draggableClass = ‘cat’;

以下是demo代码
var elmItems = Array.prototype.slice.call(document.getElementsByClassName('ex-230-item')),
    rect = elmItems[0].getBoundingClientRect(),
    itemHeight = rect.height,
    itemsTop = elmItems.map(function(v, i) {
      return Math.round(rect.top + window.pageYOffset + itemHeight * i);
    }),
    items = [];

  function sort(targetItem, top) {
    var curIndex = items.indexOf(targetItem),
      newIndex = itemsTop.indexOf(Math.round(top));
    if (newIndex !== -1 && newIndex !== curIndex) {
      items.splice(newIndex, 0, items.splice(curIndex, 1)[0]);
      items.forEach(function(item, i) {
        if (item !== targetItem) { item.top = itemsTop[i]; }
      });
    }
  }

  items = elmItems.map(function(elmItem) {
    return new PlainDraggable(elmItem, {
      snap: {
        y: {step: itemHeight},
        side: 'start'
      },
      onDrag: function(moveTo) {
        if (!moveTo.snapped) { return false; }
        sort(this, moveTo.top);
        return true;
      }
    });
  });
// GPT自动讲解
此代码使用 plain-draggable 库实现垂直列表拖动和排序效果。
首先，代码选择所有类名为 ex-230-item 的元素，并使用 Array.prototype.slice.call() 将生成的 HTMLCollection 转换为数组。 然后它获取数组中第一个元素的边界矩形并计算每个项目的高度。 它还根据其索引和项目高度计算每个项目的顶部位置。
接下来，代码定义了一个 sort() 函数，它将目标项目和顶部位置作为参数。 该函数计算目标项目在项目数组中的当前索引和基于顶部位置的新索引。 如果新索引与当前索引不同，则函数将目标项目移动到项目数组中的新索引并更新数组中每个项目的顶部位置。
最后，代码为 elmItems 数组中的每个项目创建一个 PlainDraggable 实例。 捕捉选项设置为将项目捕捉到 y 轴上每个步骤（即每个项目）的开始。 onDrag 事件用于调用 sort() 函数并在拖动项目时更新项目数组。
总的来说，这段代码是一个很好的例子，展示了如何使用plain-draggable实现垂直列表的拖拽排序效果。
if(this.pageNum>pageNumber){
                setTimeout(()=>{
                    return this.renderPage(pageNumber+1)
                },0)
            }
this.loadNumber = pageNumber
            if(this.loadlimit>pageNumber&&this.pageNum>pageNumber){
                setTimeout(()=>{
                    return this.renderPage(this.loadNumber+1)
                },0)
            }
        nextpage(){
//mounted触发
            const container = document.querySelector('.pdfWrapper')
            container.addEventListener('scroll',()=>{
                // 加1是解决精度问题jg
                const isScrolledToBottom = container.scrollTop + container.clientHeight + 1 >= container.scrollHeight;
                if(isScrolledToBottom){
                    this.loadlimit = this.loadlimit+5
                    this.renderPage(this.loadNumber+1)
                }
            })
        },