试探拖拽事件

TRY...

<template>
  <div class="app-container">
    <div class="table-container">
      <el-row :gutter="20">
        <el-col :span="4">
          <div class="drag-from-zone">
            <div
              class="drag-item"
              v-for="(item, idx) in list"
              :key="idx"
              draggable="true"
              @dragstart="dragstart($event, item, idx)"
              @dragend="dragend($event)"
            >
              {{ item.name }}
            </div>
          </div>
        </el-col>
        <el-col :span="20">
          <div
            id="target"
            @dragover="dragover($event)"
            @drop="drop($event)"
            class="drag-target-zone"
          >
            <div
              class="drag-item"
              v-for="(item, idx) in targetList"
              :key="idx"
              @dragstart="dragstart($event, item)"
              @dragend="dragend($event)"
            >
              {{ item.name }}
              <i class="el-icon-close" @click="removeItem(item)"></i>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
var index = 0;
var tmpData;
export default {
  data() {
    return {
      list: [
        { id: 1, name: "元素1" },
        { id: 2, name: "元素2" },
        { id: 3, name: "元素3" },
        { id: 4, name: "元素4" },
        { id: 5, name: "元素5" },
        { id: 6, name: "元素6" },
        { id: 7, name: "元素7" },
        { id: 8, name: "元素8" },
        { id: 9, name: "元素9" },
        { id: 10, name: "元素10" },
      ],
      targetList: [],
    };
  },
  methods: {
    dragstart(e, item) {
      //拖拽开始时将item存入vuex
      console.log("拖拽开始 =>", item);
      tmpData = item;
    },
    dragend(e) {
      //拖拽结束执行的事件
      console.log("拖拽结束 =>", e);
    },
    dragover(e) {
      //拖拽在这个div里面拖拽时执行的事件
      //一定要执行preventDefault(),否则drop事件不会被触发
      e.preventDefault();
    },
    drop(e) {
      //在div里拖拽停止时执行的事件
      this.list = this.list.filter((item) => item.id !== tmpData.id);
      this.targetList.push(tmpData);
    },
    removeItem(data){
      this.targetList = this.targetList.filter((item) => item.id !== data.id);
      this.list.push(data);
    },
  },
};
</script>

<style scoped>
.drag-from-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.drag-item {
  display: inline-block;
  padding: 10px 5px;
  cursor: pointer;
  border: 1px solid #ccc;
  margin-bottom: 10px;
}
.drag-target-zone {
  height: 500px;
  border: 1px solid #ccc;
}
</style>

 

标签：name,元素,拖拽,item,tmpData,事件,id,试探
来源： https://www.cnblogs.com/shaoyunfeng93/p/16267614.html