1.在项目中总会遇见一些需要排序的数据 , 我们可以通过vue.draggable 进行拖动排序 。
2.Draggable为基于Sortable.js的vue组件,用以实现拖拽功能。
3.拖顶的数据和data里的数据为双向绑定 ,在界面变的时候data中的数据也在跟着变化。
安装
npm i -S vuedraggable
使用
页面引入
import draggable from "vuedraggable"
定义组件
components: {
draggable
},
效果展示
low的效果图
页面使用
class="syllable_ul"
element="ul"
:list="syllable"
:options="{group:'title', animation:150}"
:no-transition-on-drag="true"
@change="change"
@start="start"
@end="end"
:move="move"
>
{{item.title}}事件
//evt里面有两个值,一个evt.added 和evt.removed 可以分别知道移动元素的ID和删除元素的ID
change(evt) {
console.log(evt , 'change...')
},
//start ,end ,add,update, sort, remove 得到的都差不多
start(evt) {
this.drag = true
console.log(evt , 'start...')
},
end(evt) {
console.log(evt , 'end....')
this.drag = true
evt.item //可以知道拖动的本身
evt.to // 可以知道拖动的目标列表
evt.from // 可以知道之前的列表
evt.oldIndex // 可以知道拖动前的位置
evt.newIndex // 可以知道拖动后的位置
},
move(evt, originalEvent) {
console.log(evt , 'move')
console.log(originalEvent) //鼠标位置
}
属性和方法说明
属性( Attributes)
draggable的属性:
参数
说明
可选值
默认值
value
用于实现拖拽的list,通常和内部v-for循环的数组为同一数组
Array,非必须
null
list
就是value的替代品。从表现上没有看出不同
Array,非必须
null
element
标签在渲染后展现出来的标签类型 ,可以用来兼容UI组件
String,
div
options
配置项对象 下面有详细解释
Object