基于VUE+ElementUI中el-tree组件实现数据拖拽

最近遇见一个这样的需求：树形数据结构需要支持拖拽移动。该方案简单便捷，基于ElementU就可以完成，无需第三方插件，废话少说，上源码！

• 静态效果图
  

• 动态效果图
  

• 实现源码（HTML）

    <el-tree
      ref="momdelTree"
      v-loading="moddleLoading"
      :highlight-current="true"
      :data="moddleTreeList"
      :filter-node-method="filterNode"
      node-key="id"
      default-expand-all
      :props="{ label: 'menuName', children: 'children' }"
      draggable
      :allow-drop="allowDrop"
      @node-click="selectNode"
      @node-drop="nodeDrop"
    >
    </el-tree>

• 实现源码（JS）

    allowDrop(draggingNode, dropNode, type) {
      return (
        type !== 'inner' &&
        draggingNode.data.parentMenuId === dropNode.data.parentMenuId
      )
    },
    async nodeDrop(draggingNode, dropNode, type, event) {
      this.moddleLoading = true
      try {
        const res = await Promise.all(
          dropNode.parent.childNodes.map((item, index) => {
            if (draggingNode.data.parentMenuId) {
              return NemuManageApi.setSort({
                id: item.data.id,
                menuOrder: index,
                opUser: this.$store.state.user.userLoginName,
              })
            } else {
              return NemuManageApi.setSort({
                id: item.data.id,
                menuOrder: index,
                opUser: this.$store.state.user.userLoginName,
              })
            }
          })
        )
        this.$message({ type: 'success', message: '数据更新成功' })
      } catch (error) {
        this.$message.error('数据更新失败', error)
      } finally {
        this.moddleLoading = false
      }
    }