vue使用拖拽方式创建结构树 vue使用拖拽方式创建结构树

本文实例为大家分享了vue使用拖拽方式创建结构树的具体代码，供大家参考，具体内容如下
在页面中拖拽虚线框中的节点，创建向右的结构树，如下图
【vue使用拖拽方式创建结构树】
文章图片

记录实现思路：
vueTree.vue

.container {padding: 20px; width: calc(100% - 40px); height: calc(100% - 40px); .node-container {height: 100px; border: 1px dashed red; display: flex; .source-node {width: 50px; height: 30px; background: #fff; border: 1px solid blue; text-align: center; line-height: 30px; margin: 10px; cursor: pointer; }}.tree-container {height: calc(100% - 122px); margin-top: 20px; }}

config,js

export class Node{constructor(name){this.name = name,this.children = []}}

treeNode.vue

.node {border: 1px solid orange; border-radius: 4px; position: relative; display: inline-flex; align-items: center; justify-content: space-between; background-color: #fff; height: 36px; padding: 0 12px 0 16px; line-height: 36px; margin-bottom: 10px; .name {font-size: 16px; margin-right: 12px; }.del {color: red; font-size: 12px; cursor: pointer; }&.drag-over-node {box-shadow: 6px 6px 12px rgba(106, 20, 134, 0.15); }}.node-box {display: inline-flex; flex-direction: column; .node-inner {margin-left: 80px; // 连接竖条&:not(:last-child):before {position: absolute; left: -70px; top: 22px; border: 1px solid orange; content: ""; width: 8px; background-color: #fff; border-bottom-color: #fff; height: 100%; border-top-color: #fff; z-index: 3; }// 连接横条&:after {left: -61px; width: 60px; content: ""; position: absolute; top: 14px; height: 8px; border: 1px solid orange; content: ""; background-color: #fff; border-right-color: #fff; border-left-color: #fff; z-index: 3; }// 最后一个竖条圆滑拐角&:nth-last-child(2):before {border-bottom-left-radius: 6px; border-bottom-color: orange; }// 第一个横条拉长&:first-child:after {left: -81px; width: 80px; z-index: 2; }}}.node-inner {position: relative; }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。