VUE实现拖拽,vue拖拉拽生成组件
这篇文章主要为大家详细介绍了某视频剪辑软件使用拖拽方式创建结构树，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件使用拖拽方式创建结构树的具体代码，供大家参考，具体内容如下
在页面中拖拽虚线框中的节点，创建向右的结构树，如下图
记录实现思路：
vueTree.vue
模板
div class=容器
div class=节点容器
div v-for=(item，index) in nodeList
:key=index
class=源节点
draggable=true
@dragstart=dragStart(item)
{{ item }}
/div
/div
div class=树容器
@dragover=allowDrop
@drop=handleDrop
树节点v-if=nodeData
ref=node
:nodeData=nodeData
@delete-node=deleteTree /
/div
/div
/模板
脚本
从""导入TreeNode ./treeNode.vue
从""导入{节点} ./config.js
导出默认值{
名称：“vue-tree”，
组件：{
TreeNode
},
//后代节点无法获取节点数据，即无法独立创建节点，所以将祖先节点的创建节点方法暴露给后代节点
提供(){
返回{
创建节点：this.createNode
}
},
data () {
返回{
nodeList: [0 ， 1 ， 2 ， 3 ， 4 ， 5 ， 6 ， 7 ， 8 ， 9]，
currNode: null，
节点数据：空
}
},
方法：{
//开始拖拽，获取节点数据
拖拽开始(项目){
this.currNode=item
},
//若未生成跟节点，则允许拖拽
allowDrop(事件){
如果(!this.nodeData) {
事件。预防默认()
}
},
//拖拽结束，生成节点
handleDrop () {
如果(!this.nodeData) {
this.nodeData=this.createNode()
}
},
createNode () {
让节点=新节点(this.currNode)
返回节点
},
//根节点删除，删除整个树
deleteTree () {
this.nodeData=null
}
}
}
/脚本
样式lang=scss 范围。容器{
填充：20px
宽度：calc(100%-40px)；
高度：calc(100%-40px)；节点容器{
高度：100像素
边框：1px虚线红色；
显示器：flex。源节点{
宽度：50px
高度：30px
背景：# fff
边框：1px纯蓝；
文本对齐：居中；
行高：30px
边距：10px
光标：指针；
}
}。树容器{
身高：calc(100%-122 px)；
边距-顶部：20px
}
}
/风格
配置，js
导出类节点{
构造者（姓名){
this.name=name，
this.children=[]
}
}
树节点。某视频剪辑软件
模板
！-
结构：最外层是节点内部，每个节点内部中有一个结节与节点盒、节点存放当前节点，节点盒存放当前节点的全部子节点，当前节点有几个子节点则节点盒中就会有几个节点内部，以此循环
节点内部
节点/节点
节点盒
节点内部
节点/节点
节点盒./节点框
/节点内部
节点内部
节点/节点
节点盒./节点框
/节点内部
.
/节点框
/节点内部
-
div class=node-inner
div class=node
:class= { drag-over-node :is dragover }
@dragover=dragOver
@dragleave=dragLeave
@drop=nodeDrop
span class= name"{ nodedata。name } }/span
span class=del
@click=deleteNode 删除/span
/div
div v-show= nodedata。孩子。长度0
class=节点盒
nodeData.children中的树节点v-for=(项目，索引
:key=index
:nodeData=item
@ delete-node= delete child(index)/
/div
/div
/模板
脚本
导出默认值{
名称："树节点",
道具：{
节点数据：{
类型：对象，
默认值：()={ }
}
},
//获取祖先节点传递的数据
注入：[createNode]，
data () {
返回{
isDragover: false
}
},
方法：{
//节点允许拖拽添加子节点
拖拽（事件){
事件。预防默认()
如果(!this.isDragover) {
this.isDragover=true
}
},
dragLeave () {
if (this.isDragover) {
this.isDragover=false
}
},
//为节点添加子节点
nodeDrop () {
let node=this.createNode()
这个。nodedata。孩子。推送(节点)
this.isDragover=false
},
//删除当前节点，本质是交给父级删除子节点
deleteNode () {
这个emit(delete-node )
},
//接收删除子节点的指令并执行删除功能
deleteChild (index) {
this.nodeData.children.splice(索引，1)
}
}
}
/脚本
样式lang=scss 范围。节点{
边框：1px纯色橙色；
边框-半径：4px
位置：相对；
显示：内嵌-伸缩；
对齐-项目：居中；
justify-content:space-between；
背景色：# fff
高度：36px
填充：0 12px 0 16px
行高：36px
边距-底部：10px。名称{
字体大小：16px
右边距：12px
}。德尔{
颜色：红色；
字体大小：12px
光标：指针；
}。拖到节点上{
盒影：6px 6px 12px rgba(106，20，134，0.15)；
}
}。节点盒{
显示：内嵌-伸缩；
伸缩方向：列；节点-内部{
左边距：80px
//连接竖条
:not(:last-child):before {
位置：绝对；
左：-70px；
top:22px；
边框：1px纯色橙色；
内容："";
宽度：8px
背景色：# fff
边框-底部-颜色：# fff
身高：100%;
边框-顶部-颜色：# fff
z指数：3;
}
//连接横条
：在{
左：-61px；
宽度：60px
内容："";
位置：绝对；
top:14px；
高度：8px
边框：1px纯色橙色；
内容："";
背景色：# fff
边框-右边-颜色：# fff
边框-左侧-颜色：# fff
z指数：3;
}
//最后一个竖条圆滑拐角
：第n-最后一个孩子(2):之前{
边框-底部-左侧-半径：6px
边框-底部-颜色：橙色；
}
//第一个横条拉长
：第一个孩子：之后{
左：-81px；
宽度：80px
z指数：2;
}
}
}。节点-内部{
位置：相对；
}
/风格
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。