vue 实现文本的拖拽_Vue组件Draggable实现拖拽功能

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