Vue拖拽文件，从一个盒子拖拽到另一个盒子中

手摸手教你最简单的树拖拽

从树型控件中找到需要的变量拖拽添加到我们自己的盒子，为我所用！代码如下：

<div class="tree-drag">
        <div class="tree">
          <div class="tree-top">
            <span>可选成员</span>
            <span><i class="el-icon-s-custom" />{{ peopleNum }}人</span>
          </div>
          <div class="tree-content">
            <el-input
              v-model="filterText"
              placeholder="请输入成员姓名"
              suffix-icon="el-icon-search"
            />
            <el-tree
              ref="tree"
              :data="treeData"
              node-key="id"
              default-expand-all
              draggable
              :allow-drop="allowDrop"
              :allow-drag="allowDrag"
              :filter-node-method="filterNode"
              @node-drag-start="handleDragStart"
              @node-drag-end="handleDragEnd"
            >
              <span slot-scope="{node,data}" class="custom-tree-node" :style="{cursor: node.data.type===1? 'move' : 'not-allowed'}">
                <span v-if="node.data.type===1" style="margin-right: 5px;"><i class="el-icon-s-custom" /> </span>
                <span>{{ data.label }}</span>
              </span>
            </el-tree>
          </div>

 moveTrue: false, // 拖拽样式
      dialogAdd: false, // 选择人员框
      mode: 'transfer', // 注意fromData数据格式，必须完全一样，如果不一样，需要进行对应的更改*
      fromData: [
        {
          id: '1',
          pid: 0,
          label: '一级 1',
          children: [
            {
              id: '1-1',
              pid: '1',
              label: '二级 1-1',
              children: []
            },
            {
              id: '1-2',
              pid: '1',
              label: '二级 1-2',
              children: [
                {
                  id: '1-2-1',
                  pid: '1-2',
                  children: [],
                  label: '二级 1-2-1'
                },
                {
                  id: '1-2-2',
                  pid: '1-2',
                  children: [],
                  label: '二级 1-2-2'
                }
              ]
            }
          ]
        }
      ],
      toData: [],
      title: ['可选成员', '已选成员'],
      // 树拖拽
      treeData: [{
      }],
      rightList: [],
      filterText: '', // tree过滤
      signIndex: {}, // 拖拽标记
      peopleNum: 0
```watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  mounted() {
  },
  methods: {
    subPeople() { // 确定
      if (this.rightList.length > 0) {
        this.rightList.map(res => {
          res.memberId = res.id
          res.memberName = res.label
          res.memberDeptName = res.deptName
          res.memberPrivilege = 'view'
        })
        this.$emit('subPeople', this.rightList)
        this.hide()
      } else {
        this.$message.error('成员添加不能为空！')
      }
    },
    hide() { // 取消
      this.rightList = []
      this.dialogAdd = false
    },
    showView() {
      this.dialogAdd = true
    },
    // 监听穿梭框组件添加
    add(fromData, toData, obj) {
      // 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象
      // 通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
      // console.log("fromData:", fromData);
      // console.log("toData:", toData);
      // console.log("obj:", obj);
    },
    // 监听穿梭框组件移除
    remove(fromData, toData, obj) {
      // 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象
      // 通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
      // console.log("fromData:", fromData);
      // console.log("toData:", toData);
      // console.log("obj:", obj);
    },
    handleDragStart(node, ev) { // 拖拽开始
      this.moveTrue = true
      // ev.dataTransfer.setData('text/plain', ev.target.innerText)
      // var img = new Image()
      // img.src = '@/assets/images/login-background.jpg'
      // ev.dataTransfer.setDragImage(img, 10, 10)
      // ev.dataTransfer.setDragImage(ev.path[0].lastElementChild.lastChild, 10, 10)
      ev.dataTransfer.setData('tree-item', JSON.stringify(node.data))
    },
    handleDragEnd(draggingNode, endNode, position, event) { // 拖拽结束
      if (!draggingNode.data.disabled) {
        this.rightList.map(res => {
          if (this.rightList.length > 0 && res.id === draggingNode.data.id) {
            draggingNode.data.label = draggingNode.data.label + '（已添加）'
            draggingNode.data.disabled = true
          }
        })
      } else {
        this.$Message.error('成员已存在，不可重复添加！')
      }
    },
    allowDrop(draggingNode, dropNode, type) {
      return false
    },
    allowDrag(draggingNode) { // 判定 最底层子集才能拖拽
      if (draggingNode.data.type === 1 && !draggingNode.data.disabled) {
        // 是否可用
        return draggingNode.data
      } else {
        return false
      }
    },
    drop(event) {
      const data = event.dataTransfer.getData('tree-item')
      this.rightList.push(JSON.parse(data))
      this.rightList = _.uniqBy(this.rightList, 'id')
    },
    filterNode(value, data) { // 过滤
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    menuListFilter (arr) {
      arr.forEach(item => {
        if (item.disabled) {
          delete item.disabled
        }
        if (item.children && item.children.length > 0) {
          this.menuListFilter(item.children)
        }
      })
    },
    clearBtn() { // 一键清空
      this.rightList = []
      // this.menuListFilter(this.treeData)
      this.$emit('subPeopleTwo')
    }
  }
## 全部代码就在这里啦---很丝滑吧
## 因为我本地还有上页面的数据回显功能，所以上面有冗余代码请自行根据需要删减哦
*上图上图
![好看吧](https://img-blog.csdnimg.cn/093a842775a0459e8ff89d8420545af4.png#pic_center)
*![美滋滋](https://img-blog.csdnimg.cn/908368ce459f425796bc653697e211be.png#pic_center)

## 欢迎关注！点赞！！转发哦！！！