实现Tree 树形控件的鼠标拖拽功能

1.element中的el-tree实现可拖拽节点

通过 draggable 属性可让节点变为可拖拽

 <el-tree

        :data="data"

        node-key="id"

        default-expand-all

        @node-drag-start="handleDragStart"

        @node-drag-enter="handleDragEnter"

        @node-drag-leave="handleDragLeave"

        @node-drag-over="handleDragOver"

        @node-drag-end="handleDragEnd"

        @node-drop="handleDrop"

        draggable

        :allow-drop="allowDrop"

        :allow-drag="allowDrag"

      >

      </el-tree>

  methods: {

    handleDragStart(node, ev) {

      console.log("drag start", node);

    },

    handleDragEnter(draggingNode, dropNode, ev) {

      console.log("tree drag enter: ", dropNode.label);

    },

    handleDragLeave(draggingNode, dropNode, ev) {

      console.log("tree drag leave: ", dropNode.label);

    },

    handleDragOver(draggingNode, dropNode, ev) {

      console.log("tree drag over: ", dropNode.label);

    },

    handleDragEnd(draggingNode, dropNode, dropType, ev) {

      console.log("tree drag end: ", dropNode && dropNode.label, dropType);

    },

    handleDrop(draggingNode, dropNode, dropType, ev) {

      console.log("tree drop: ", dropNode.label, dropType);

    },

    allowDrop(draggingNode, dropNode, type) {

      if (dropNode.data.label === "二级 3-1") {

        return type !== "inner";

      } else {

        return true;

      }

    },

    allowDrag(draggingNode) {

      return draggingNode.data.label.indexOf("三级 3-2-2") === -1;

    },

  },

实现一个只能在本级改变位置拖拽

使用allowDrop

   // 拖拽时判定目标节点能否被放置。

    //draggingNode(拖拽的节点)

    //dropNode(放置的目标节点)

    //type 参数有三种情况：'prev'、'inner' 和 'next'，分别表示

    //放置在目标节点前、插入至目标节点和放置在目标节点后

    allowDrop(draggingNode, dropNode, type) {

      // 一级节点互相拖拽

      // if (draggingNode.level == "1") {

      //   if (dropNode.level == "1") {

      //     return type === "prev" || type === "next";

      //   }

      // }

      // // 二级节点之间互相拖拽，但是只能放在自己的二级节点

      // if (draggingNode.level == "2") {

      //   if (dropNode.level == "2") {

      //     if (dropNode.data.ParentNodes == draggingNode.data.ParentNodes) {

      //       return type === "prev" || type === "next";

      //     }

      //   }

      // }

      if (draggingNode.level == dropNode.level) {

        if (dropNode.data.ParentNodes == draggingNode.data.ParentNodes) {

          return type === "prev" || type === "next";

        }

      }

      return false;

    },

这样就可以实现，同级拖拽