,参考文档：vuedraggable, Vue.Draggable学习总结
使用插件 vuedraggable
###一级排序
1. 使用npm 安装插件vuedraggable
npm i -S vuedraggable
2. srcipt中导入vuedraggable,且声明组件
导入 import draggable from 'vuedraggable'
声明 components: { draggable },
3. 定义list，list内对象结构可随意定制
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. 添加个button，获取list的值
<div class="bar">
<Button type="primary" @click="sure">确定</Button>
</div>
sure () {
console.log(this.list)
}
### 多级排序
vuedraggable 可以多级镶嵌的来达到多级拖拽排序的目的
1. 把list的结构改一下
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 ，写一个组件，方便循环嵌套
<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.在页面中调用nest组件
import next from "./nest";
components: { draggable, next },
<next :menu="menu" :lev="1" />
例子代码：例子（密码：87qv）
网友评论