插件Vue.Draggable(5000🌟)
Posted chentianwei
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了插件Vue.Draggable(5000🌟)相关的知识，希望对你有一定的参考价值。
安装资源库：从Vue资源：https://github.com/vuejs/awesome-vue下载
Libraries/UI Components/Form/Drag and Drop
yarn add vuedraggable (5000??) (点击查看git)
特色：
- 全面支持Sortable.js功能
- 触摸屏幕
- drag handles and selectable text
- Smart auto-srolling
- 在不同lists间拖拉放置
- 无需JQuery
- 保持同步html, view model list
- Compatible with Vue.js2.0
- 取消功能支持
- 当需要完全控制时，Event报告任何改变
- 复用现成的UI library组件。通过element和componentData props，它们可以被拖拉。
安装：
1.yarn add vuedraggable
2.或者直接用链接link(点击查看) 按顺序添加3行URL地址，按顺序引用vum.min.js, Sortable.min.js,vuedraggable.min.js
典型使用：
<draggable v-model=‘myArray‘ v-bind:options="{ group: ‘people‘}" @start=" drag = true" @end="drag = false">
<div v-for="element in myArray" v-bind:key="element.id"> {{ element.name }} </div>
</draggable>
#Rails应用,
- 在application.js中添加import draggable from ‘vuedraggable‘
- 在new Vue（{}）中添加components: { draggable }
.vue中添加：
import draggable from ‘vuedraggable‘
...
export default {
components: { draggable, }, ...
}
其他使用（未学）：
- <transition-group> 过渡使用。
- footer slot使用：在vuedraggable组件内部添加一个不可移动的元素，作为页脚。slot=‘footer‘
- Vuex使用：
Props
value 类型[]
list 类型[]
options 类型Object
element 类型String,
- 默认‘div‘, draggable组件创建的用于slot的外部节点元素。
- 其他用途：传递Vue组件名字作为元素。具体见componentData props
clone 类型函数
move 类型函数
componentData 类型Object
- 用于传递额外的信息给子组件，通过element props
- 具体见git文档案例：(Example (using element UI library):)
Events
支持可整理的事件：
start, add, remove, update, end, choose, sort, filter, clone。（具体见git）
这些事件会被onXXX激活：
例子：<draggable :list="list" @end="onEnd">
change event
change事件激活需要：
- list prop不为null，
- 对应的array被选中进行drag-and-drop操作
change事件的特性：（调用event时，需要其中一个作为参数）
- added: 一个元素被添加到list prop的array
- newIndex：增加的元素的索引
- element: 增加的元素
- removed：一个元素从array中移除。
- oldIndex：在被移除之前，这个元素的索引
- element： 这个元素
- moved： 一个元素在array中移动。
- newIndex: 被移动的元素的当前索引
- oldIndex: 被移动的元素的旧索引
- element
Fiddle
6个小案例，和一个完全案例代码
其中：https://codepen.io/chentianwei411/pen/qMMazN?editors=1011
以上是关于插件Vue.Draggable(5000🌟)的主要内容，如果未能解决你的问题，请参考以下文章