介绍
在我们日常开发中可能会面临很多交互上的问题,特别是在Web应用盛行的今天,在之前有段时间的文章中介绍过javascript的拖拽库sortablejs,Vue.Draggable就是基于Sortable.js的允许拖放和视图模型数组同步的组件,避免了我们常说的重复造轮子,有了它省了我们很多事情。它基于Sortable.js并提供Sortable.js的所有功能!
![b5dcbd741cdfe39efea81de35b594f85.gif](https://i-blog.csdnimg.cn/blog_migrate/12fb69d72012c4193318f9a0af810de2.gif)
开源地址
Github:
https://github.com/SortableJS/Vue.Draggable
演示地址:
https://sortablejs.github.io/Vue.Draggable/#/two-lists
功能特性
1、完全支持Sortable.js功能:
- 支持触摸设备
- 支持拖动手柄和可选文本
- 智能自动滚动支持
- 不同列表之间的拖放
- 没有jQuery依赖
2、保持同步HTML和视图模型列表
3、与Vue.js 2.0 transition-group兼容
4、支持取消
5、在需要完全控制时报告任何更改的事件
6、重用现有的UI库组件(例如vuetify,element或vue材料等)并使用tag和componentData道具使它们可拖动
安装和使用
- npm or yarn
yarn add vuedraggablenpm i -S vuedraggable
- 浏览器
- 典型用法
{{element.name}}
- .Vue文件
import draggable from 'vuedraggable' ... export default { components: { draggable, }, ...
- transition-group
{{element.name}}
可拖动组件应直接包装可拖动元素,或包含可拖动元素的过渡组件。
- 带有页脚槽()
{{element.name}}
Add
- 标题槽
{{element.name}}
Add
- Vuex
computed: { myList: { get() { return this.$store.state.myList }, set(value) { this.$store.commit('updateList', value) } }}
具体如何使用参照官网说明
示例
- 简单用法
![41f23dbcebc2ce89e4d8be4b1174303a.gif](https://i-blog.csdnimg.cn/blog_migrate/d767d5e5d6852a94badfe0a7c3fbe4ca.gif)
- 两个列表
![1a70ec7338c3aa291e19275b2662d277.gif](https://i-blog.csdnimg.cn/blog_migrate/b15d89e9de6cf748c790f01632d0a7f4.gif)
- 复制
![368d90ddd246adff4b22df1d46b69258.gif](https://i-blog.csdnimg.cn/blog_migrate/f0d4b32c9d5b9f1166590262dcb515d0.gif)
- 按Ctrl键从列表1克隆元素
![218fba138a0aa6e582b5cdb8b4c5141e.gif](https://i-blog.csdnimg.cn/blog_migrate/47293ee4f551e2eed9d8fd21da4dcaa3.gif)
- 使用手柄图标拖动
![b060619b60c6a56f9155282d35b768ec.gif](https://i-blog.csdnimg.cn/blog_migrate/249d0fe552aa04a26f624c634bcbe9e1.gif)
- 过渡
![df444a510028a5f42b6ea1662acee212.gif](https://i-blog.csdnimg.cn/blog_migrate/23907bde875fbf2561db4b2dad91c337.gif)
- 表格行
![0e2afd39d6f60085f439525c86e4bdcb.gif](https://i-blog.csdnimg.cn/blog_migrate/cbddf024a64be6a8891a4783f758fb41.gif)
- 表格列
![cb959193862a777fcf8547ea4c162421.gif](https://i-blog.csdnimg.cn/blog_migrate/d0dcc4efea78a06c37a0dd2e931e78ec.gif)
- 嵌套拖拽
![a6fb2947dde086c3a6ab898e3b983456.gif](https://i-blog.csdnimg.cn/blog_migrate/d7bf1122de956c86570aa09774791890.gif)
以上仅仅是挑选了一些示例,更多示例可直接到演示地址体验!
总结
Vue.Draggable是基于Sortable的拖放组件,可以很好的满足我们的某些交互场景,比如单据打印模板拖放、拖拽表格配合浏览器缓存实现用户的习惯记忆功能等,这些都可以配合一起实现,更多有关Sortable也可以点击下面的链接简单了解!
https://www.toutiao.com/i6690205016852005389/