vue使用vue-draggable的全过程
作者：jsmeng626
这篇文章主要介绍了vue使用vue-draggable的全过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
Vue-draggable是一个基于Vue.js的可拖拽组件库，可以方便地实现拖拽排序、拖拽交换等功能。
安装
首先需要安装vue-draggable组件库。
可以通过npm进行安装：
npm install vuedraggable --save
使用
1.引入组件
在vue组件中引入vuedraggable组件：
import draggable from 'vuedraggable'
2.注册组件
在vue组件中注册draggable组件：
export default {
components: {
draggable
}
}
3.使用组件
在vue模板中使用draggable组件：
<draggable v-model="list" :options="dragOptions">
<div v-for="item in list" :key="item.id">{{ item.name }}</div>
</draggable>
参数配置
在使用draggable组件时，可以传递一些参数进行配置。
下面是一些常用的参数：
1.v-model
v-model用于绑定数据，它绑定的是一个数组，这个数组就是我们需要排序的数据。
例如：
data () {
return {
list: [
{id: 1, name: 'item1'},
{id: 2, name: 'item2'},
{id: 3, name: 'item3'}
]
}
}
2.options
options是一个对象，用于配置draggable组件的行为。
下面是一些常用的配置：
dragOptions: {
animation: 200, // 动画时间，单位毫秒
group: 'items', // 分组，同一分组内的元素可以互相拖拽
disabled: false, // 是否禁用拖拽功能
ghostClass: 'ghost', // 拖拽过程中占位元素的class名称
handle: '.handle', // 拖拽手柄，只有拖拽手柄内的元素才能被拖拽
sort: true, // 是否启用排序功能
draggable: '.item', // 可拖拽元素的选择器
filter: '.ignore' // 不可拖拽元素的选择器
}
3.events
draggable组件还提供了一些事件，可以在事件回调函数中处理一些逻辑。
下面是一些常用的事件：
methods: {
onEnd (evt) { // 拖拽结束时触发
console.log('onEnd', evt)
},
onMove (evt) { // 拖拽过程中触发
console.log('onMove', evt)
},
onStart (evt) { // 开始拖拽时触发
console.log('onStart', evt)
}
}
完整示例
下面是一个完整的示例：
<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>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。