el-tree 拖拽到目标区域并传递数据

最新推荐文章于 2024-09-09 08:49:52 发布

厨樱

最新推荐文章于 2024-09-09 08:49:52 发布

阅读量1.4k

点赞数 5

分类专栏： vue 文章标签： vue.js elementui html5

原文链接：https://blog.csdn.net/weixin_43413047/article/details/107146810

版权

vue 专栏收录该内容

42 篇文章 1 订阅

订阅专栏

这篇博客展示了如何在 Vue.js 应用中使用 Element UI 的 el-tree 组件实现拖放功能。代码示例详细解释了如何处理节点拖动开始、允许拖放以及在主区域进行放置操作的逻辑。通过这种方式，可以方便地对树形结构数据进行动态排序。

摘要由CSDN通过智能技术生成

<template>
  <div class="container">
    <aside>
      <el-tree
        :data="data"
        node-key="id"
        default-expand-all
        @node-drag-start="handleDragStart"
        draggable
        :allow-drop="allowDrop"
        :allow-drag="allowDrag"
      ></el-tree>
    </aside>
    <main @drop="drop"  @dragover.prevent>
      <ul>
        <li
          v-for="(item,index) in rightList"
          :key="index"
        >{{item.label}}</li>
      </ul>
    </main>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: [
        {
          id: 1,
          label: "一级 1",
          children: [
            {
              id: 4,
              label: "二级 1-1",
              children: [
                {
                  id: 9,
                  label: "三级 1-1-1"
                },
                {
                  id: 10,
                  label: "三级 1-1-2"
                }
              ]
            }
          ]
        },
        {
          id: 2,
          label: "一级 2",
          children: [
            {
              id: 5,
              label: "二级 2-1"
            },
            {
              id: 6,
              label: "二级 2-2"
            }
          ]
        },
        {
          id: 3,
          label: "一级 3",
          children: [
            {
              id: 7,
              label: "二级 3-1"
            },
            {
              id: 8,
              label: "二级 3-2",
              children: [
                {
                  id: 11,
                  label: "三级 3-2-1"
                },
                {
                  id: 12,
                  label: "三级 3-2-2"
                },
                {
                  id: 13,
                  label: "三级 3-2-3"
                }
              ]
            }
          ]
        }
      ],
      rightList: [],
      defaultProps: {
        children: "children",
        label: "label"
      }
    };
  },
  methods: {
    handleDragStart(node, ev) {
      ev.dataTransfer.setData("item", JSON.stringify(node.data));
    },
    allowDrop(draggingNode, dropNode, type) {
      return false;
    },
    allowDrag(draggingNode) {
      return true;
    },
    drop(event) {
      let data = event.dataTransfer.getData("item");
      this.rightList.push(JSON.parse(data))
    //   console.log('this.rightList:', this.rightList)
    }
  }
};
</script>

<style scoped>
*{
    margin: 0;
    padding: 0;
}
.container {
  display: flex;
  height: 500px;
  overflow: auto;
}

.container > aside {
  width: 300px;
  height: 100%;
  border: 1px solid royalblue;
}

.container > main {
  flex: 1;
  height: 100%;
  border: 1px solid red;
}
</style>

大佬的文章，解决了遇到的拖拽问题，特此记录。