插件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应用,

1. 在application.js中添加import draggable from ‘vuedraggable‘
2. 在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事件激活需要：

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/qMMazN?editors=1011

原文地址：https://www.cnblogs.com/chentianwei/p/9655328.html