draggable布局 vue_vue-draggable 学习和使用

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