Draggable为基于Sortable.js的vue组件,用以实现拖拽功能。
具体说明,请参考:学习链接
npm官方演示:
vuedraggable特性:
支持触摸设备
支持拖拽和选择文本
支持智能滚动
支持不同列表之间的拖拽
不以jQuery为基础
和视图模型同步刷新
和vue2的国度动画兼容
支持撤销操作
当需要完全控制时,可以抛出所有变化
可以和现有的UI组件兼容
使用
安装:
npm install vuedraggable
页面引入:
import draggable from 'vuedraggable'
data定义数据进行模拟:这是排序的案例,跟上面图不一样
{{item.name}}
{{listdata}}
import draggable from 'vuedraggable'
export default {
name: 'draggabletest',
components: {
draggable,
},
data () {
return {
listdata:[
{
id: 1,
name: '叶落森1'
},
{
id: 2,
name: '叶落森2'
},
{
id: 3,
name: '叶落森3'
},
{
id: 4,
name: '叶落森4'
},
{
id: 5,
name: '叶落森5'
}
]
}
},
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
时间: 2018-11-29