效果图

可删除,重复添加判断,重复阻止添加

标签结构---事件属性看上上的帖子

标签

   <el-form-item label="数据源：">

          <div class="MyShuttleLeft">
            <div class="title">数据源</div>
            <div class="dataBox" @dragleave.stop="dragleave($event, 'main')">
              <div v-for="(item, i) in dataOriginList" :key="i" class="dataList" draggable
                @dragover.prevent @dragstart.stop="dragstart($event, item)"
                @dragend.stop="dragEnd($event, item)">
                {{ item.Name}}
              </div>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="云空间：">
          <div class="MyShuttle">
            <div v-for="(item, i) in spaceList" ref="MyShuttleRight" :key="i" class="shuttleSpace"
              @dragenter.stop="dragenter($event, item,i,'space')" @dragenter.prevent
              @dragover.prevent>
              <div class="title">
                {{ item.Name}}
              </div>
              <div class="dataBox">
                <div v-for="(el, k) in item.spaceDataList" :key="k" class="dataList">
                  <span>{{ el.Name}}</span><i class="el-icon-delete"
                    @click="handleDelete(item, i,k)"></i>
                </div>
              </div>
            </div>
          </div>
        </el-form-item>

代码

data() {
    return {
      dataOriginList: [{ Name: '数据源001' }, { Name: '数据源002' }],
      spaceList: [{ Name: '空间001', spaceDataList: [] }, { Name: '空间002', spaceDataList: []}],
      spaceListIndex: null,
      spaceListItem: {},
          }
    }

  methods: {
    dragleave(e, item) {
      // console.log(e, item)
      if (item === 'main') {
        this.isDragStatus = true
      } else {
        this.isDragStatus = false
      }
      // console.log(this.isDragStatus)
    },
    dragstart(e, item) {
      // console.log(e, item)
    },
    dragenter(e, item, i, space) {
      // 移动到的元素上-目标元素上面松开此事件会触发
      if (space === 'space') {
        // console.log(e, item)
        this.spaceListIndex = i
        this.spaceListItem = item
      }
    },
     dragEnd(e, item) {
      if (this.spaceListIndex >= 0) {
        const top = this.$refs.MyShuttleRight[this.spaceListIndex].getBoundingClientRect().top
        const right = this.$refs.MyShuttleRight[this.spaceListIndex].getBoundingClientRect().right
        const bottom = this.$refs.MyShuttleRight[this.spaceListIndex].getBoundingClientRect().bottom
        const left = this.$refs.MyShuttleRight[this.spaceListIndex].getBoundingClientRect().left
        if (this.isDragStatus && e.clientY > top && e.clientY < bottom && e.clientX > left && e.clientX < right) {
          if (this.spaceList[this.spaceListIndex].spaceDataList.length > 0) {
            console.log(this.spaceList[this.spaceListIndex].spaceDataList.indexOf(item))
            if (this.spaceList[this.spaceListIndex].spaceDataList.indexOf(item) !== -1) {
              this.$message.error('您重复添加了!')
            } else {
              this.spaceList[this.spaceListIndex].spaceDataList.push(item)
            }
          }
          if (this.spaceList[this.spaceListIndex].spaceDataList.length <= 0) {
            this.spaceList[this.spaceListIndex].spaceDataList.push(item)
          }
        }
      }
    },
    // 云空间列表删除事件,传入item,index
    handleDelete(item, i, k) {
      this.spaceList[i].spaceDataList.splice(k, 1)
    },
    }