Vue-draggable是一个基于Vue.js的可拖拽组件库,可以方便地实现拖拽排序、拖拽交换等功能。
安装
首先需要安装vue-draggable组件库。可以通过npm进行安装:
npm install vuedraggable --save
使用
- 引入组件
在vue组件中引入vuedraggable组件:
import draggable from 'vuedraggable'
- 注册组件
在vue组件中注册draggable组件:
export default {
components: {
draggable
}
}
- 使用组件
在vue模板中使用draggable组件:
<draggable v-model="list" :options="dragOptions">
<div v-for="item in list" :key="item.id">{{ item.name }}</div>
</draggable>
参数配置
在使用draggable组件时,可以传递一些参数进行配置。下面是一些常用的参数:
- v-model
v-model用于绑定数据,它绑定的是一个数组,这个数组就是我们需要排序的数据。例如:
data () {
return {
list: [
{id: 1, name: 'item1'},
{id: 2, name: 'item2'},
{id: 3, name: 'item3'}
]
}
}
- options
options是一个对象,用于配置draggable组件的行为。下面是一些常用的配置:
dragOptions: {
animation: 200, // 动画时间,单位毫秒
group: 'items', // 分组,同一分组内的元素可以互相拖拽
disabled: false, // 是否禁用拖拽功能
ghostClass: 'ghost', // 拖拽过程中占位元素的class名称
handle: '.handle', // 拖拽手柄,只有拖拽手柄内的元素才能被拖拽
sort: true, // 是否启用排序功能
draggable: '.item', // 可拖拽元素的选择器
filter: '.ignore' // 不可拖拽元素的选择器
}
- events
draggable组件还提供了一些事件,可以在事件回调函数中处理一些逻辑。下面是一些常用的事件:文章来源:https://www.toymoban.com/news/detail-486692.html
methods: {
onEnd (evt) { // 拖拽结束时触发
console.log('onEnd', evt)
},
onMove (evt) { // 拖拽过程中触发
console.log('onMove', evt)
},
onStart (evt) { // 开始拖拽时触发
console.log('onStart', evt)
}
}
完整示例
下面是一个完整的示例:文章来源地址https://www.toymoban.com/news/detail-486692.html
<template>
<div>
<h1>Vue Draggable Example</h1>
<draggable v-model="list" :options="dragOptions" @end="onEnd" @move="onMove" @start="onStart">
<div v-for="item in list" :key="item.id" class="item">
<span class="handle">☰</span>{{ item.name }}
</div>
</draggable>
</div>
</template>
<script>
import draggable from 'vuedraggable'
export default {
components: {
draggable
},
data () {
return {
list: [
{id: 1, name: 'item1'},
{id: 2, name: 'item2'},
{id: 3, name: 'item3'}
],
dragOptions: {
animation: 200,
group: 'items',
disabled: false,
ghostClass: 'ghost',
handle: '.handle',
sort: true,
draggable: '.item',
filter: '.ignore'
}
}
},
methods: {
onEnd (evt) {
console.log('onEnd', evt)
},
onMove (evt) {
console.log('onMove', evt)
},
onStart (evt) {
console.log('onStart', evt)
}
}
}
</script>
<style>
.ghost {
opacity: 0.5;
background-color: #ccc;
}
.handle {
cursor: move;
user-select: none;
}
.ignore {
pointer-events: none;
}
</style>
到了这里,关于vue中使用vue-draggable教程的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!