【文心一言提供的参考】
在Vue中,你可以使用@dragover.prevent
来阻止拖拽事件的默认行为。这是一个常见的需求,尤其是在你想要创建可拖拽排序的列表时。
以下是一个简单的例子,演示如何在Vue中使用dragover.prevent
:
<template>
<div>
<ul
@dragover.prevent="handleDragOver"
@drop.prevent="handleDrop"
style="border: 1px solid #ccc; padding: 10px; width: 300px;"
>
<li
v-for="(item, index) in items"
:key="index"
draggable
@dragstart="handleDragStart"
style="margin: 5px; padding: 5px; border: 1px dashed #ccc; cursor: move;"
>
{{ item }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
items: ['Item 1', 'Item 2', 'Item 3'],
draggedItem: null,
draggedIndex: null,
};
},
methods: {
handleDragStart(event, item) {
this.draggedItem = item;
this.draggedIndex = this.items.indexOf(item);
},
handleDragOver(event) {
// 可以在这里添加自定义样式以指示可以放置
},
handleDrop(event) {
const dropIndex = Array.from(event.target.parentNode.children).indexOf(event.target);
const newItems = [...this.items];
newItems.splice(dropIndex, 0, newItems.splice(this.draggedIndex, 1)[0]);
this.items = newItems;
}
}
};
</script>
在这个例子中,我们有一个可拖动列表项的ul
元素,每个li
元素都是可拖动的。我们使用dragstart
事件来记录拖动的项和索引,使用dragover.prevent
来阻止默认的拖拽放置行为,并在drop
事件中处理项的移动。这样就可以创建一个可拖拽排序的列表了。
【实际使用】
根据以上参考,添加了这句 @dragover.prevent="handlerDrag"
<div class="img-item"
:style="imgItem"
...
@dragover.prevent="handlerDrag">