element-tree-拖拽，更换两个节点的位置，不影响其他节点的排序

葱头的故事

已于 2023-11-01 16:19:01 修改

阅读量620

点赞数

分类专栏： element 文章标签： vue.js 前端 javascript elementui

于 2022-08-18 15:33:22 首次发布

本文链接：https://blog.csdn.net/weixin_43993121/article/details/126406855

版权

element 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

需求：拖拽节点时要求allow-drop，都返回false，即页面上没有拖拽成功的效果，保存拖动节点和目标节点的数据，在拖拽结束后node-drag-end发送请求，重新获取树形数据

在这里插入图片描述

其中有一个问题，因为allow-drop会返回false，以至于在拖拽节点时，会显示禁止的鼠标，给用户造成这不能拖动的错觉，因此要修改：
H5拖拽

      const handleNodeOver = (draggingNode, dropNode, event) => {
        console.log('handleNodeOver')
        console.log('event', event)
        const { typeParentCode: dragParentCode } = draggingNode.data
        const { typeParentCode: dropParentCode } = dropNode.data

        if (dragParentCode === dropParentCode) {
          event.dataTransfer.dropEffect = 'move'
        } else {
          event.dataTransfer.dropEffect = 'none'
        }
      }```