drag拖拽事件

最新推荐文章于 2023-12-04 09:27:43 发布

怠惰Zsj

最新推荐文章于 2023-12-04 09:27:43 发布

阅读量474

点赞数 1

文章标签： js vue javascript dom event

本文链接：https://blog.csdn.net/classOurself/article/details/118396491

版权

本文介绍了如何利用HTML的draggable属性开启拖拽功能，并结合JavaScript和Vue.js处理拖拽事件，实现列表形式的树数据的拖拽后重新排序功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

标签属性

draggable 打开拖拽功能

拖拽事件

	// 用户开始拖拉时，在被拖拉的节点上触发，该事件的target属性是被拖拉的节点
    dragHandler(event) {
      event = event || window.event || arguments.callee.caller.arguments[0];
      event.stopPropagation();
      //拖动起手
      this.grid.removeNodeData = this.rowData;
    },
    // 拖拉到当前节点上方时，在当前节点上持续触发（相隔几百毫秒）
    dragOverHandler(event) {
      event = event || window.event || arguments.callee.caller.arguments[0];
      event.preventDefault();
    },
    // 拖拉进入当前节点时，在当前节点上触发一次
    dragEnterHandler(event) {
      this.preventHandler(event);
    },
    // 拖拉操作离开当前节点范围时，在当前节点上触发
    dragLeaveHandler(event) {
      this.preventHandler(event);
    },
    // 被拖拉的节点或选中的文本，释放到目标节点时，在目标节点上触发
    dragDropHandler(event) {
      this.preventHandler(event);
      if(this.rowData.id==this.grid.removeNodeData.id) return
      if(this.rowData.parentid!==this.grid.removeNodeData.parentid) return
      // 排序操作
      this.grid.orderTreeRow(this.rowData)
    },
    // 阻止冒泡和默认事件
    preventHandler(event) {
      event = event || window.event || arguments.callee.caller.arguments[0];
      event.returnValue = false;
      event.preventDefault();
      event.stopPropagation();
    }

列表形式的树数据

拖拽后重新排序

orderTreeRow(rowData) {
      let removeCount = { num: 0 };
      let currentCount = { num: 0 };
      // 寻找子节点
      let findChildren = function(list, rootId, count) {
        const arr = [];
        list.forEach(item => {
          if (item.parentid === rootId) {
            count.num += 1;
            const children = findChildren(list, item.id, count);
            if (children.length) {
              item.children = children;
            }
            arr.push(item);
          }
        });
        return arr;
      };
      findChildren(this.renderData, this.removeNodeData.id, removeCount);
      findChildren(this.renderData, rowData.id, currentCount);
      let idx1 = this.renderData.findIndex(
        item => item.id === this.removeNodeData.id
      );
      const arr = this.renderData.splice(idx1, 1 + removeCount.num);
      let idx2 = this.renderData.findIndex(item => item.id === rowData.id);
      console.log(idx1, idx2);
      if (idx1 <= idx2) {
        this.renderData.splice(idx2 + currentCount.num + 1, 0, ...arr);
      } else {
        this.renderData.splice(idx2, 0, ...arr);
      }
      this.$emit("draggable-row", this.renderData);
    }