记录目的

本篇文章主要是想记录拖拽时进行条件判断，若条件不满足则数据不变（还原数据）的情况。


这个条件判断、还原数据的方法，我也是在网上查询总结出的，发现这方面的东西不好找，自己做个记录，方便以后查询

项目中安装sortablejs

npm i sortablejs

在要使用拖拽的组件进行引用

import Sortable from "sortablejs";

js代码

拖拽条件判断

首先我们需要设置

forceFallback: false

(设置了这个，

才能达到条件不满足，还原数据的效果

)

在

onMove

中进行条件判断，如果不满足条件，

进行 return false

。

在onMove事件中，

evt.dragged 是被拖拽的元素，evt.related是要交换的目标元素，拿到两个元素的rowIndex，就能在数组中获取对应的两条数据，即可进行条件判断等操作

// 初始化拖拽排序
    initSort() {
      // 这里的字符串可以修改，可以自己设置对应要去找的元素标签
      const selector = " .el-table__body-wrapper > table > tbody";
      const el = document.querySelectorAll(selector)[0];
      let that = this;
      let state = true; // 判断是否满足拖拽交换的条件
      // 根据具体需求配置options配置项
      this.dragIns = new Sortable(el, {
        forceFallback: false, //这是还原数据必要的设置
        // disabled: true,
        // setData(dataTransfer, dragEl) {
        //   dataTransfer.setData('Text', dragEl.textContent);
        // },
        onMove(evt) {
          // 如果不符合判断条件，进行还原交换
          // 这里是我自己的条件判断，你可以根据自己需要判断的情况进行编写
          // 记得若不满足条件，则进行 return false
          // 记得上面需要设置 forceFallback: false
          if (that.sortKey.length > 0) {
            for (let i = 0; i < that.sortKey.length; i++) {
              if (Array.isArray(that.tableData[evt.dragged.rowIndex][that.sortKey[i]])) {
                if (
                  JSON.stringify(that.tableData[evt.dragged.rowIndex][that.sortKey[i]]) !=
                  JSON.stringify(that.tableData[evt.related.rowIndex][that.sortKey[i]])
                ) {
                  state = false;
                  return false;
                }
              } else {
                if (
                  that.tableData[evt.dragged.rowIndex][that.sortKey[i]] !=
                  that.tableData[evt.related.rowIndex][that.sortKey[i]]
                ) {
                  state = false;
                  return false;
                }
              }
            }
          }
        },
        onEnd: (evt) => {
          if (!state) {
            state = true;
            that.$message.warning("我是提示信息");
            return;
          }
          // 监听拖动结束事件
          const newIndex = evt.newIndex;
          const oldIndex = evt.oldIndex;
          const targetRow = this.tableData.splice(oldIndex, 1)[0];
          this.tableData.splice(newIndex, 0, targetRow);
        },
      });
    },
    // 销毁拖拽排序实例
    stopDrag() {
      this.dragIns.destroy();
    },

点击前往Sortable.js中文网|配置，查看完整配置参数

Sortable.js中文网|配置