vue js从大小排序_Github Star 8K+的vue拖放组件Vue.Draggable,功能强大，必须了解

简介

先讲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

就简单介绍到这里，关于更多用法，请参见官网技术文档。