1.在項(xiàng)目中總會(huì)遇見一些需要排序的數(shù)據(jù) ， 我們可以通過(guò)vue.draggable 進(jìn)行拖動(dòng)排序 把篓。
2.Draggable為基于Sortable.js的vue組件韧掩，用以實(shí)現(xiàn)拖拽功能。
3.拖頂?shù)臄?shù)據(jù)和data里的數(shù)據(jù)為雙向綁定 郎楼，在界面變的時(shí)候data中的數(shù)據(jù)也在跟著變化呜袁。
安裝
npm i -S vuedraggable
使用
頁(yè)面引入
import draggable from "vuedraggable"
定義組件
components: {
draggable
},
效果展示
low的效果圖
頁(yè)面使用
<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里面有兩個(gè)值阶界，一個(gè)evt.added 和evt.removed 可以分別知道移動(dòng)元素的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 //可以知道拖動(dòng)的本身
evt.to // 可以知道拖動(dòng)的目標(biāo)列表
evt.from // 可以知道之前的列表
evt.oldIndex // 可以知道拖動(dòng)前的位置
evt.newIndex // 可以知道拖動(dòng)后的位置
},
move(evt, originalEvent) {
console.log(evt , 'move')
console.log(originalEvent) //鼠標(biāo)位置
}
屬性和方法說(shuō)明
屬性( Attributes)
draggable的屬性：
| 參數(shù) | 說(shuō)明 | 可選值 | 默認(rèn)值 |
|---|---|---|---|
| value | 用于實(shí)現(xiàn)拖拽的list，通常和內(nèi)部v-for循環(huán)的數(shù)組為同一數(shù)組 | Array氧映，非必須 | null |
| list | 就是value的替代品。從表現(xiàn)上沒有看出不同 | Array脱货，非必須 | null |
| element | <draggable>標(biāo)簽在渲染后展現(xiàn)出來(lái)的標(biāo)簽類型 ,可以用來(lái)兼容UI組件
|
String岛都， | div |
| options | 配置項(xiàng)對(duì)象 下面有詳細(xì)解釋
|
Object |
