Vue.Draggable
v2.24.3
Vue 元件 (Vue.js 2.0) 或指令 (Vue.js 1.0) 允許拖曳以及與視圖模型陣列同步。
基於並提供 Sortable.js 的所有功能
參見 vue.draggable.next
https://sortablejs.github.io/Vue.Draggable/
https://david-desmaisons.github.io/draggable-example/
tag和componentData屬性使它們可拖曳尋找支持者！
覺得這個專案有用嗎？你可以買一個☕或一個給我？
yarn add vuedraggable
npm i -S vuedraggable請注意，Vue 2.0 是 vuedraggable，而不是 1.0 版本的 vue-draggable
< script src =" //cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js " > script >
< script src =" //cdn.jsdelivr.net/npm/[email protected]/Sortable.min.js " > script >
< script src =" //cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js " > script >請參閱範例部分
使用可拖曳組件：
< draggable v-model =" myArray " group =" people " @start =" drag=true " @end =" drag=false " >
< div v-for =" element in myArray " :key =" element.id " > {{element.name}} div >
draggable >.vue 檔：
import draggable from 'vuedraggable'
. . .
export default {
components : {
draggable ,
} ,
...transition-group ： < draggable v-model =" myArray " >
< transition-group >
< div v-for =" element in myArray " :key =" element.id " >
{{element.name}}
div >
transition-group >
draggable >可拖曳組件應直接包裝可拖曳元素，或包含可拖曳元素的transition-component 。
< draggable v-model =" myArray " draggable =" .item " >
< div v-for =" element in myArray " :key =" element.id " class =" item " >
{{element.name}}
div >
< button slot =" footer " @click =" addPeople " > Add button >
draggable > < draggable v-model =" myArray " draggable =" .item " >
< div v-for =" element in myArray " :key =" element.id " class =" item " >
{{element.name}}
div >
< button slot =" header " @click =" addPeople " > Add button >
draggable > < draggable v-model =' myList ' > computed: {
myList : {
get ( ) {
return this . $store . state . myList
} ,
set ( value ) {
this . $store . commit ( 'updateList' , value )
}
}
}類型： Array
必填： false
預設值： null
將陣列輸入到可拖曳組件。通常與內部元素 v-for 指令所引用的陣列相同。
這是使用 Vue.draggable 的首選方式，因為它與 Vuex 相容。
它不應該直接使用，而只能透過v-model指令使用：
< draggable v-model =" myArray " > 類型： Array
必填： false
預設值： null
list 是value屬性的替代方案，是一個與拖放同步的陣列。
主要區別在於list prop 是由可拖曳元件使用 splice 方法更新的，而value是不可變的。
不要與 value 屬性結合使用。
2.19版本新增
從 2.19 版本開始，可排序選項可以直接設定為 vue.draggable 屬性。
這意味著所有可排序選項都是有效的可排序屬性，但所有以「on」開頭的方法都有一個值得注意的例外，因為可拖曳元件透過事件公開相同的 API。
支援 kebab-case 屬性：例如， ghost-class屬性將轉換為ghostClass可排序選項。
設定句柄、可排序和群組選項範例：
< draggable
v-model =" list "
handle =" .handle "
:group =" { name: 'people', pull: 'clone', put: false } "
ghost-class =" ghost "
:sort =" false "
@change =" log "
>
draggable > 類型： String
預設值： 'div'
可拖曳元件會建立為所包含插槽的外部元素的元素的 HTML 節點類型。
也可以將 vue 元件的名稱當作元素傳遞。在這種情況下，draggable 屬性將傳遞給建立元件。
如果您需要為建立的元件設定 props 或 event，請另參閱 componentData。
類型： Function
必填： false
預設值：（ (original) => { return original;}
當克隆選項為 true 時，呼叫來源元件的函數來克隆元素。唯一參數是要克隆的 viewModel 元素，傳回值是其克隆版本。
預設情況下，vue.draggable 會重複使用 viewModel 元素，因此如果您想複製或深度複製它，則必須使用此鉤子。
類型： Function
必填： false
預設值： null
如果不為 null，則將以與 Sortable onMove 回呼類似的方式呼叫此函數。傳回 false 將取消拖曳操作。
function onMoveCallback ( evt , originalEvent ) {
...
// return false; — for cancel
}evt 物件具有與 Sortable onMove 事件相同的屬性，以及 3 個附加屬性：
draggedContext ：連結到拖曳元素的上下文index : 拖曳元素索引element : 視圖模型元素下的拖曳元素futureIndex ：如果接受放置操作，則拖曳元素的潛在索引relatedContext ：連結到目前拖曳操作的上下文index : 目標元素索引element : 目標元素視圖模型元素list ：目標列表component ：目標VueComponentHTML：
< draggable :list =" list " :move =" checkMove " >javascript:
checkMove: function ( evt ) {
return ( evt . draggedContext . element . name !== 'apple' ) ;
}看完整範例：Cancel.html、cancel.js
類型： Object
必填： false
預設值： null
此道具用於將附加資訊傳遞給標記道具聲明的子元件。
價值：
props ：要傳遞給子元件的道具attrs ：要傳遞給子元件的 attrson : 子元件中要訂閱的事件範例（使用元素 UI 庫）：
< draggable tag =" el-collapse " :list =" list " :component-data =" getComponentData() " >
< el-collapse-item v-for =" e in list " :title =" e.title " :name =" e.name " :key =" e.name " >
< div > {{e.description}} div >
el-collapse-item >
draggable > methods: {
handleChange ( ) {
console . log ( 'changed' ) ;
} ,
inputChanged ( value ) {
this . activeNames = value ;
} ,
getComponentData ( ) {
return {
on : {
change : this . handleChange ,
input : this . inputChanged
} ,
attrs : {
wrap : true
} ,
props : {
value : this . activeNames
}
} ;
}
}支援可排序事件：
start 、 add 、 remove 、 update 、 end 、 choose 、 unchoose 、 sort 、 filter 、 clone
每當 Sortable.js 使用相同參數觸發 onStart、onAdd、onRemove、onUpdate、onEnd、onChoose、onUnchoose、onSort、onClone 時，都會呼叫事件。
請參閱此處以供參考
請注意，SortableJS OnMove 回呼與 move 屬性映射
HTML：
< draggable :list =" list " @end =" onEnd " >改變事件
當 list prop 不為 null 且對應的陣列因拖放操作而改變時，會觸發change事件。
使用包含以下屬性之一的參數呼叫此事件：
added ：包含新增到陣列的元素的訊息newIndex : 新增元素的索引element : 新增的元素removed ：包含從數組中刪除的元素的信息oldIndex ：刪除先前元素的索引element : 被移除的元素moved ：包含在陣列中移動的元素的訊息newIndex : 移動元素的目前索引oldIndex ：移動元素的舊索引element : 移動的元素限制：頁首或頁尾插槽均不能與過渡組一起使用。
使用header槽在 vuedraggable 元件內加入不可拖曳的元素。重要提示：它應該與可拖曳選項結合使用來標記可拖曳元素。請注意，標題槽將始終添加在預設槽之前，無論其在模板中的位置如何。前任：
< draggable v-model =" myArray " draggable =" .item " >
< div v-for =" element in myArray " :key =" element.id " class =" item " >
{{element.name}}
div >
< button slot =" header " @click =" addPeople " > Add button >
draggable > 使用footer槽在 vuedraggable 元件內加入不可拖曳的元素。重要提示：它應該與可拖曳選項結合使用來標記可拖曳元素。請注意，無論頁腳位置在範本中的位置如何，頁腳位置總是會新增到預設位置之後。前任：
< draggable v-model =" myArray " draggable =" .item " >
< div v-for =" element in myArray " :key =" element.id " class =" item " >
{{element.name}}
div >
< button slot =" footer " @click =" addPeople " > Add button >
draggable >Vue.draggable 子項應始終使用 v-for 指令來對應清單或 value 屬性
v-for 中的子元素應與 Vue.js 中的任何元素一樣設定鍵控。請特別注意提供相關的鍵值：
可拖曳範例
看這裡
