简介
先讲Sortable.js, Sortable.js用于在现代浏览器和触摸设备上重新排序拖放列表。支持Meteor,AngularJS,React,Polymer,Vue,Ember,Knockout和任何CSS库,例如Bootstrap, github star 17K+, 可以说非常流行和受到广大前端同学的欢迎,今天的主角就是基于Sortable.js的Vue组件。直接上特效:
Vue.Draggable 目前github star 8.3K+, 最新版本2.23.0
功能列表
Vue组件(Vue.js 2.0)或指令(Vue.js 1.0)允许拖放和视图模型数组同步。
基于并提供Sortable.js的所有功能
- 完全支持Sortable.js功能:
- 支持触摸设备
- 支持拖动手柄和可选文本
- 智能自动滚动
- 支持不同列表之间的拖放
- 没有jQuery的依赖
- 保持同步HTML和视图模型列表
- 与Vue.js 2.0过渡组兼容
- 在需要完全控制时报告任何更改的事件
- 重用现有的UI库组件(例如vuetify,element或vue材料等...)并使用tag和componentData道具使它们可拖动
快速开发
- 安装
yarn add vuedraggablenpm i -S vuedraggable
请注意,对于Vue 2.0而言,它是vuedraggable,而不是版本1.0的vue-draggable
- CDN
For Vue.js 2.0
典型用法:
{{element.name}}
.vue 文件:
import draggable from 'vuedraggable' ... export default { components: { draggable, }, ...
With transition-group:
{{element.name}}
可拖动组件应直接包装可拖动元素,或transition-component包含可拖动元素。
With footer slot:
{{element.name}}
Add
With header slot:
{{element.name}}
Add
With Vuex:
computed: { myList: { get() { return this.$store.state.myList }, set(value) { this.$store.commit('updateList', value) } }}
PS
就简单介绍到这里,关于更多用法,请参见官网技术文档。