插件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🌟)