功能展示
代码实现:
<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">🗑</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>