vue3 + elementui 实现表单表格拖拽

• sortablejs实现表格拖拽

先安装sortablejs

npm install sortablejs --save

然后在需要的页面引入

import Sortable from "sortablejs";

 

使用：

需要注意的是，row-key必填，且必须是唯一的，比如ID，否则会出现排序不对的情况

在setup()中编写行拖拽的实现方法，具体逻辑是创建一个Sortable的实例，将需要拖拽的元素给到Sortable实例，进行需要的配置，然后在拖拽结束的方法onEnd()中实现改变排序的逻辑。

// 表格行拖拽
const rowDrop = () => {
  let tbody = document.querySelector(".el-table__body-wrapper tbody");
  Sortable.create(tbody, {
    // or { name: "...", pull: [true, false, 'clone', array], put: [true, false, array] }
    group: {
      name: "words",
      pull: true,
      put: true,
    },
    animation: 150, // ms, number 单位：ms，定义排序动画的时间
    onAdd: function (evt: any) {
      // 拖拽时候添加有新的节点的时候发生该事件
      console.log("onAdd.foo:", [evt.item, evt.from]);
    },
    onUpdate: function (evt: any) {
      // 拖拽更新节点位置发生该事件
      console.log("onUpdate.foo:", [evt.item, evt.from]);
    },
    onRemove: function (evt: any) {
      // 删除拖拽节点的时候促发该事件
      console.log("onRemove.foo:", [evt.item, evt.from]);
    },
    onStart: function (evt: any) {
      // 开始拖拽出发该函数
      console.log("onStart.foo:", [evt.item, evt.from]);
    },
    onSort: function (evt: any) {
      // 发生排序发生该事件
      console.log("onUpdate.foo:", [evt.item, evt.from]);
    },
    onEnd(evt: any) {
      // 结束拖拽
      console.log("结束表格拖拽", evt);
      // 如果拖拽结束后顺序发生了变化，则对数据进行修改
      if (evt.oldIndex !== evt.newIndex) {
        let currRow = fieldOptions.value.splice(evt.oldIndex, 1)[0];
        fieldOptions.value.splice(evt.newIndex, 0, currRow);
        // 将排序后的ID抽离成数组传给后端
        let optIDs: string[] = [];
        fieldOptions.value.forEach((item) => {
          optIDs.push(item.ID);
        });
        const params = {
          Params: {
            SpaceID: spaceID.value,
            LaunchID: launchID.value,
            OptIDs: optIDs,
          },
          Options: {
            APIServer: apiServer,
          },
        };
        // 发送改变顺序的请求
        store.commit("doRequest");
        spaceService.OrderOptions(params).then((res: any) => {
          store.commit("deResponse");
          if (res.Status === 0) {
            console.log("表格顺序修改成功");
          } else {
            ElMessage({
              showClose: true,
              message: res.ErrorMessage,
              type: "error",
              duration: 10000,
            });
          }
        });
      }
    },
  });
};

• vue-draggable-next实现表单拖拽

vue.draggable.next是一款vue3的拖拽插件，是基于Sortable.js实现的，你可以用它来拖拽列表、菜单、工作台、选项卡等常见的工作场景。

• 安装依赖

npm install vue-draggable-next
// or
yarn add vue-draggable-next

• 在需要的页面中引入

import { VueDraggableNext } from "vue-draggable-next";
components: {
  draggable: VueDraggableNext,
    },

使用：

• 备注：draggable组件的handle=".icon-bar"配置是仅在点击类名为icon-bar的icon时才会进行拖动