Vue组件Draggable实现拖拽功能

2022-01-13

这篇文章主要为大家详细介绍了Vue组件Draggable实现拖拽功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

Draggable为基于Sortable.js的vue组件,用以实现拖拽功能。

具体说明,请参考:学习链接

npm官方演示:

vuedraggable特性:

  • 支持触摸设备
  • 支持拖拽和选择文本
  • 支持智能滚动
  • 支持不同列表之间的拖拽
  • 不以jQuery为基础
  • 和视图模型同步刷新
  • 和vue2的国度动画兼容
  • 支持撤销操作
  • 当需要完全控制时,可以抛出所有变化
  • 可以和现有的UI组件兼容

使用

安装:

 npm install vuedraggable

页面引入:

 import draggable from 'vuedraggable'

data定义数据进行模拟:这是排序的案例,跟上面图不一样

    
  • {{item.name}}
  • {{listdata}}

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持本站。

    以上就是Vue组件Draggable实现拖拽功能的详细内容,更多请关注本站其它相关文章!