vue 拖动元素到指定区域后进行删除

功能展示

代码实现： 

<template>
  <div id="app">
    <div class="item" v-for="(item, index) in list" :key="item" draggable="true" @dragstart="dragStart($event, index)">
      {{ item }}
    </div>
    <div class="delete-icon" id="delete-icon" @drop="deleteButton" @dragover="allowDrop">&#128465;</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"],
    };
  },
  methods: {
    dragStart(event, index) {
      // 设置拖拽时携带的数据
      event.dataTransfer.setData('index', index);
    },
    allowDrop(event) {
      event.preventDefault();
    },
    deleteButton(event) {
      // 阻止默认的drop行为
      event.preventDefault();
      // 获取拖拽传递的数据
      const index = Number(event.dataTransfer.getData('index'))
      console.log("remove=>", index)
      this.list.splice(index, 1)
    }
  }

};
</script>

<style>
.del {
  color: red;
  width: 50px;
  height: 20px;
  background-color: aqua;
  margin: 20px;
}

.item {
  background-color: rgb(246, 143, 8);
  width: 50px;
  height: 30px;
  margin: 20px auto;
  touch-action: manipulation;
  /* 阻止移动端默认的滚动行为 */
}

.delete-icon {
  margin: 20px;
  font-size: 50px;
  text-align: center;
}
</style>