vue3 Element Plus Tree组件超简单实现拖动排序

因为两个项目使用了两个不同的UI框架,所以也要实现一下拖动排序

要求:

• 当前节点下的子节点拖动排序
• 不允许将外部节点拖进子节点
• 不允许将内部节点拖到外面

闲话少说,直接上代码

 <el-tree :allow-drop="allowDrop" :data="data" draggable node-key="id" />

<script lang="ts" setup>
const allowDrop = (draggingNode, dropNode, type) => {
  if (type === "inner") return;
  const draggingLabel = draggingNode.data.label;
  const dropNodeLabel = dropNode.data.label;
  let a = [];
  loop(data, draggingLabel, (it, index, arr) => {
    a = arr;
  });
  if (a.some((it) => it.label === dropNodeLabel)) {
    return true;
  }
  return false;
};
function loop(data, key, callback) {
  data.forEach((item, index, arr) => {
    if (item.label === key) {
      return callback(item, index, arr);
    }
    if (item.children) {
      return loop(item.children, key, callback);
    }
  });
}
const data = [
  {
    label: "Level one 1",
  },
  {
    label: "Level one 2",
    children: [
      {
        label: "Level two 2-1",
      },
      {
        label: "Level two 2-2",
      },
    ],
  },
];
</script>

也很简单