安装资源库:从Vue资源:https://github.com/vuejs/awesome-vue下载
Libraries/UI Components/Form/Drag and Drop
yarn add vuedraggable (5000?) (点击查看git)
相关博客(功能翻译):https://www.jianshu.com/p/03f0f58f84cc
特色:
- 全面支持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
典型使用:
#Rails应用的html.erb上写代码,不用单文件组件:
<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>
在app/javascripts/packs/application.js中
- 添加import draggable from 'vuedraggable',
- 然后在new Vue({})中添加components: { draggable }
单文件组件的用法:xxx.vue中添加:
<template>
<draggable v-model='xxx'>....</draggable>
</template>
export default {
import draggable from 'vuedraggable'
components: { draggable, }, ...
}
其他使用(未学):
- <transition-group> 过渡使用。
- footer slot使用:在vuedraggable组件内部添加一个不可移动的元素,作为页脚。slot='footer'
- Vuex使用:
Props
value 类型Array, 用于绑定数据,不能直接用,需要使用v-model="数据"
list 类型Array, value的替代prop. 区别是list prop由draggable组件使用splice()方法更新, value prop不可改变immutable。两者不可结合使用。
options 类型Object, 用于初始化 sortable object。涉及Sortable库
例子:group:name相同的组可以互相拖动。handle和filter是一对相反的效果(可拖动/不可拖动)
<draggable v-model='list.cards' :options="{group: 'cards', filter: '.ignore-element'}" @change="cardMoved">
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)
无论何时当onStart, onAdd...由Sortable.js被激活, start, add...被调用。 用相同的参数。
例子:<draggable :list="list" @start='加一个方法' @end="onEnd">
参数:
- to:
HTMLElement
— list, in which moved element. - from:
HTMLElement
— previous list - item:
HTMLElement
— dragged element - clone:
HTMLElement
- oldIndex:
Number|undefined
— old index within parent - newIndex:
Number|undefined
— new index within parent
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/yxEBbV
==============================
QQ群:143522604
群里有相关资源
欢迎和大家一起学习、交流、提升!
==============================