在Vue可拖动中,要保持拖动项目在以前的位置直到释放,可以通过以下步骤实现:
vuedraggable
。vuedraggable
库,并在模板中使用draggable
指令来实现拖动功能。例如:<template>
<div>
<draggable v-model="items" :options="dragOptions">
<div v-for="item in items" :key="item.id">{{ item.name }}</div>
</draggable>
</div>
</template>
<script>
import draggable from 'vuedraggable';
export default {
components: {
draggable,
},
data() {
return {
items: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' },
],
dragOptions: {
group: 'items',
animation: 150,
// 其他拖动选项...
},
};
},
};
</script>
v-model="items"
将items
数组与拖动列表绑定起来,draggable
组件会根据v-for
循环生成的元素实现拖动功能。@start
和@end
事件来实现。修改上述代码如下:<template>
<div>
<draggable v-model="items" :options="dragOptions" @start="onDragStart" @end="onDragEnd">
<div v-for="item in items" :key="item.id">{{ item.name }}</div>
</draggable>
</div>
</template>
<script>
import draggable from 'vuedraggable';
export default {
components: {
draggable,
},
data() {
return {
items: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' },
],
dragOptions: {
group: 'items',
animation: 150,
// 其他拖动选项...
},
initialIndex: null,
};
},
methods: {
onDragStart(event) {
this.initialIndex = event.oldIndex;
},
onDragEnd(event) {
const newIndex = event.newIndex;
const draggedItem = this.items.splice(newIndex, 1)[0];
this.items.splice(this.initialIndex, 0, draggedItem);
this.initialIndex = null;
},
},
};
</script>
onDragStart
方法记录了拖动开始时的初始位置,onDragEnd
方法将拖动的项目放回初始位置。通过splice
方法将项目从新位置删除,并插入到初始位置。这样,拖动项目就能保持在以前的位置,直到释放。你可以根据实际需求调整代码和样式,以适应你的项目。
领取专属 10元无门槛券
手把手带您无忧上云