Vue.Draggable學習總結 ( Draggable為基於Sortable.js的vue元件,用以實現拖拽功能 )
阿新 • • 發佈:2020-09-14
1.在專案中總會遇見一些需要排序的資料 , 我們可以通過vue.draggable 進行拖動排序 。
2.Draggable為基於Sortable.js的vue元件,用以實現拖拽功能。
3.拖頂的資料和data裡的資料為雙向繫結 ,在介面變的時候data中的資料也在跟著變化。
安裝
npm i -S vuedraggable
使用
頁面引入
import draggable from "vuedraggable"
定義元件
components: {
draggable
},
效果展示
low的效果圖頁面使用
<draggable
class="syllable_ul"
element="ul"
:list="syllable"
:options="{group:'title', animation:150}"
:no-transition-on-drag="true"
@change="change"
@start="start"
@end="end"
:move="move"
>
<transition-group type="transition" :name="!drag? 'syll_li' : null" :css="true">
<li v-for="(item , idx) in syllable" :key="idx">{{item.title}}</li>
</transition-group>
</draggable>
事件
//evt裡面有兩個值,一個evt.added 和evt.removed 可以分別知道移動元素的ID和刪除元素的ID
change(evt) {
console.log(evt , 'change...')
},
//start ,end ,add,update, sort, remove 得到的都差不多
start(evt) {
this.drag = true
console.log(evt , 'start...')
},
end(evt) {
console.log(evt , 'end....')
this.drag = true
evt.item //可以知道拖動的本身
evt.to // 可以知道拖動的目標列表
evt.from // 可以知道之前的列表
evt.oldIndex // 可以知道拖動前的位置
evt.newIndex // 可以知道拖動後的位置
},
move(evt, originalEvent) {
console.log(evt , 'move')
console.log(originalEvent) //滑鼠位置
}
屬性和方法說明
屬性( Attributes
)
draggable的屬性:
引數 | 說明 | 可選值 | 預設值 |
---|---|---|---|
value | 用於實現拖拽的list,通常和內部v-for迴圈的陣列為同一陣列 | Array,非必須 | null |
list | 就是value的替代品。從表現上沒有看出不同 | Array,非必須 | null |
element | <draggable>標籤在渲染後展現出來的標籤型別 ,可以用來相容UI元件 |
String, | div |
options | 配置項物件 下面有詳細解釋 |
Object |
作者:我與十二月
連結:https://www.jianshu.com/p/e8ff1e1cafb1
著作權歸作者所有。商業轉載請聯絡作者獲得授權,非商業轉載請註明出處。