vuedraggable多列拖拽,vuedraggable嵌套块拖拽
这篇文章主要为大家详细介绍了某视频剪辑软件使用vuedraggable实现嵌套多层拖拽排序功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vuedraggable实现嵌套多层拖拽排序功能的具体代码，供大家参考，具体内容如下
某视频剪辑软件中实现嵌套多层拖拽功能。官网入口：
实现效果：(拖动左侧调整一级的顺序，拖动右侧调整二级的顺序)
实现步骤：
***这里使用了插件vuedraggable
第一步：安装插件
cnpm安装vuedragable-保存
第二步：在页面上引入插件并注册
从" vuedraggable "导入可拖动的
组件：{
可拖动的
},
第三步：页面上使用
模板
div class=wholeList
可拖动的
class=leftCon
:list=tolList
div class= left conli v-for= toll ist中的元素：key=element.id
{{ element.name }}
/div
/可拖动
ul class=oneUl
里
"一个人"
v-for=(item，index) in tolList
:key=index
！-拖拽内容部分-1 -
可拖动的
v-if=index===0
class=dragArea list-group
:list=item.children
:clone=clone
:group={ name: people ，pull: pullFunction }
@start=start
div v-for= item。孩子们中的元素：key=元素。id class= list-group-item
{{ element.name }}
/div
/可拖动
！-拖拽内容部分-其他-
可拖动的
五-否则
class=dragArea list-group
:list=item.children
:clone=clone
group=people
div v-for= item。孩子们中的元素：key=元素。id class= list-group-item
{{ element.name }}
/div
/可拖动
/李
/ul
el-button @click=getNewList 点我看安慰里面的最新数据/el-button
/div
/模板
脚本
从" vuedraggable "导入可拖动的
导出默认值{
组件：{
可拖动的
},
data() {
返回{
收费列表：[
{
名称： 第一天，
儿童：[
{
名称： 11111 ，id: 1
}
]
}, {
名称： 第二天，
儿童：[
{
名称： aaaaa ，id: 11
}, {
名称： bbbbbb ，id: 12
}
]
},
{
名称： 第三天，
儿童：[
{
名称： ，111，，id: 21
}
]
}
],
controlOnStart:真
}
},
方法：{
克隆({姓名，id }) {
返回{姓名，id: id }
},
pullFunction() {
返回这个controlOnStart？克隆：对
},
开始({原始事件}) {
这个。controlonstart=原始事件。ctrl键
},
getNewList() {
让a=this.tolList
console.log(a)
}
}
}
/脚本
样式lang=scss 范围。整体列表{
边距-顶部：200像素
宽度：500像素
显示器：flex
柔性包装：缠绕；左侧图标{
宽度：100像素。左拳
背景：# 42B974
行高：80px
边距-底部：10px
}
}。一个
宽度：calc(100%-100px)；奥尼利
显示器：flex
高度：80px
边距-底部：10px
边框：1px纯红；拖拽区域{
宽度：100%;
最小高度：30px
}
}
}
}
/风格
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。