,參考文檔：vuedraggable,?Vue.Draggable學(xué)習(xí)總結(jié)
使用插件?vuedraggable
###一級排序
1. 使用npm 安裝插件vuedraggable
npm?i?-S?vuedraggable
2. srcipt中導(dǎo)入vuedraggable,且聲明組件
導(dǎo)入 import?draggable?from?'vuedraggable'
聲明 components:?{?draggable?},
3. 定義list椒袍，list內(nèi)對象結(jié)構(gòu)可隨意定制
list: [{name: 11111111111111111111}, {name: 22222222222222222}, {name: 333333333333333333333}, {name: 4444444444444444444},?{name: 55555555555555555555555},?{name: 6666666666666666}]
4. 在temlate輸出
<draggable?v-model="sort">
??????????<div?class="item"?v-for="(vo,?idx)?in?sort"?:key="idx">{{vo.name}}</div>
</draggable>
5. 添加個(gè)button，獲取list的值
<div?class="bar">
????????<Button?type="primary"?@click="sure">確定</Button>
??????</div>
?sure?()?{
?????console.log(this.list)
}
### 多級排序
vuedraggable 可以多級鑲嵌的來達(dá)到多級拖拽排序的目的
1. 把list的結(jié)構(gòu)改一下
list:?[
????????{
??????????name:?'1.一級菜單',
??????????children:?[
????????????{
??????????????name:?'二級菜單',
??????????????children:?[
????????????????{
??????????????????name:?'三級菜單'
????????????????},
????????????????{
??????????????????name:?'',
??????????????????emptyHolder:?true
????????????????}
??????????????]
????????????},
????????????{
??????????????name:?'',
??????????????emptyHolder:?true
????????????}
??????????],
????????},
????????{
??????????name:?'2.一級菜單',
??????????children:?[
????????????{
??????????????name:?'二級菜單',
??????????????children:?[
????????????????{
??????????????????name:?'三級菜單'
????????????????},
????????????????{
??????????????????name:?'',
??????????????????emptyHolder:?true
????????????????}
??????????????]
????????????},
????????????{
??????????????name:?'',
??????????????emptyHolder:?true
????????????}
??????????],
????????}
??????]
2. 用vuedraggable 岭粤，寫一個(gè)組件，方便循環(huán)嵌套
<template>
??<div?v-if="menu?&&?menu.length>0">
????<draggable
??????class="dragArea"
??????tag="div"
??????v-bind="dragOptions"
??????:list="menu"
????>
??????<template?v-for="(vo,index)?in?menu">
????????<div
??????????draggable=".item"
??????????class="list-group-item"
??????????:class="{?'nested-1':?lev?==?1,'nested-2':?lev?!=?1,}"
??????????v-if="!vo.emptyHolder"
??????????:key="index">
??????????<p>{{?vo.name?}}</p>
??????????<next?v-if="lev?<?3"?:menu="vo.children?||?[]"?:lev="lev+1"></next>
????????</div>
??????</template>
????</draggable>
??</div>
</template>
<script>
import?draggable?from?"vuedraggable"
export?default?{
??name:?"next",
??components:?{
????draggable
??},
??computed:?{
????dragOptions()?{
??????return?{
????????group:?"nested",
????????ghostClass:?"ghost",
????????animation:?150,
????????fallbackOnBody:?true,
????????swapThreshold:?0.65
??????}
????}
??},
??props:?{
????menu:?{
??????required:?true,
??????type:?Array
????},
????lev:?{
??????type:?Number,
??????default:?1
????}
??},
??mounted?()?{
??},
??methods:?{}
};
</script>
3.在頁面中調(diào)用nest組件
import?next?from?"./nest";
??components:?{?draggable,?next?},
????<next?:menu="menu"?:lev="1"?/>
例子代碼：例子（密碼：87qv）
