低代码开发之vue.draggable的使用(进阶:组件化拖拽生成功能页面)
<template>
<div>
<draggable v-model="list" group="people" @start="drag=true" @end="drag=false">
<template v-slot:item="{ element }">
<div class="list-item">{{ element.name }}</div>
</template>
</draggable>
</div>
</template>
<script>
import draggable from 'vuedraggable'
export default {
components: {
draggable
},
data() {
return {
list: [
{ name: 'John', id: 1 },
{ name: 'Jane', id: 2 },
{ name: 'Dave', id: 3 }
],
drag: false
}
}
}
</script>
<style scoped>
.list-item {
cursor: move; /* Add a cursor to show the item is draggable */
margin-bottom: 5px;
}
</style>
这个代码示例展示了如何在Vue应用中使用vuedraggable
组件来创建一个可拖拽的列表。draggable
组件是基于vuedraggable
插件,它允许用户通过拖放来重新排列列表中的元素。代码中还使用了v-slot:item
来自定义每个列表项的外观和内容。
评论已关闭