插件Vue.Draggable(5000🌟)

安装资源库：从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中

1. 添加import draggable from 'vuedraggable',
2. 然后在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事件激活需要：

1. list prop不为null，
2. 对应的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