SVGDragTree 开源项目教程-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00959/article/details/141849343

SVGDragTree 开源项目教程

SVGDragTree 一个可以通过拖放 SVG 图标，来生成拥有树状结构的视图与数据的前端组件。 SDT example:项目地址:https://gitcode.com/gh_mirrors/sv/SVGDragTree

1、项目介绍

SVGDragTree 是一个前端组件，允许用户通过拖放 SVG 图标来生成具有树状结构的视图和数据。该项目基于 SVG，因此可以与 CSS 和 DOM 协同工作，具有轻量级和无依赖的特点。SVGDragTree 提供了丰富的功能，包括元素配置、树状结构生成、数据重绘等，适用于多种应用场景，如云服务商的虚拟设备编排和思维导图制作。

2、项目快速启动

引入项目

首先，通过 <script> 标签引入 SVGDragTree 组件。如果标签放置在头部，需要为其添加 defer="defer" 属性。

<head>
  <script src="SDT.js" defer="defer" type="text/javascript" charset="utf-8"></script>
</head>

配置画布

在 HTML 文件中配置目标画布和可拖动的 SVG 图标。

<div class="sdt-canvas">
  <svg id="sdt-drop-canvas" width="100%" height="100%"></svg>
</div>

<div class="sdt-drag-element-lis">
  <div class="sdt-drag-element" data-sdt-type="icon-1">
    <svg></svg>
  </div>
  <div class="sdt-drag-element" data-sdt-type="icon-2">
    <svg></svg>
  </div>
  <div class="sdt-drag-element" data-sdt-type="icon-3">
    <svg></svg>
  </div>
</div>

初始化组件

在 JavaScript 文件中初始化组件并进行配置。

var set_o = {
  "SDTTreeElements": [],
  "SDTTreeSet": {
    "lineType": "bessel",
    "lineColor": "#f00",
    "treeCenterX": 360,
    "treeCenterY": 360,
    "treeEleMargin": 16
  }
};

SDT.SVGDragComponent(set_o);