SVGDragTree Save

• data-sdt-eleset-lineType 值为 "straight" 或 "bessel" 当值为 "straight" 时元素间连线方式为直线；当值为 "bessel" 时元素间连线方式为贝塞尔曲线；
• data-sdt-eleset-lineColor 值为颜色色值字符串 连线颜色为此色值
• data-sdt-eleset-treecenterX 值为数字（不带单位，非字符串） 树的中心 X 坐标
• data-sdt-eleset-treecenterY 值为数字（不带单位，非字符串） 树的中心 Y 坐标
• data-sdt-eleset-margin 值为数字（不带单位，非字符串） 元素的上下边距

<div class="svg-canvas"
data-sdt-eleset-lineType="bessel"
data-sdt-eleset-lineColor="#900"
data-sdt-eleset-treecenterX="360"
data-sdt-eleset-treecenterY="360"
data-sdt-eleset-margin="8">
	<svg id="dropCanvas" width="100%" height="100%">...</svg>
</div>

配置方法 2: 在新的 JS 文件中进行配置

声明一个对象 set_o 对象字面量为

注意： SDTTreeElements 是数组对象，而 SDTTreeSet 是对象

var set_o = {
	"SDTTreeElements": [],
	"SDTTreeSet": {}
	};

元素配置:

在 SDTTreeElements 数组中，每一项为一个对象，每个对象的:

• type 属性 值为字符串 表示元素类型
• dropswitch 属性 值为 true 或 false 当值为 true 时元素可直接放置于画布
• leanRight 值为 true 或 false 当值为 true 时元素默认放置于右侧树
• foresideType 值为一个数组 当数组为空时，则任何元素都将不接受其的放置；当数组有元素值为 all 时所有元素都接受其放置；当数组元素值为合法 type 时，其 type 所对应元素接受其放置

var set_o = {
"SDTTreeElements": [
	{
		"type": "icon-1", 
		"dropSwitch": true, 
		"foresideType": ["icon-1","icon-2"], 
		"leanRight": false
	},{
		"type": "icon-2",
		"dropSwitch": true,
		"foresideType": ["root", "icon-2"], 
		"leanRight": false
	},{
		"type": "icon-2",
		"dropSwitch": true,
		"foresideType": ["all"], 
		"leanRight": false
	}
],
"SDTTreeSet": {...}
};

目标画布配置:

在 SDTTreeSet 对象中，每一个属性:

• lineType 值为 "straight" 或 "bessel" 当值为 "straight" 时元素间连线方式为直线；当值为 "bessel" 时元素间连线方式为贝塞尔曲线；
• lineColor 值为颜色色值字符串 连线颜色为此色值
• treecenterX 值为数字（不带单位，非字符串） 树的中心 X 坐标
• treecenterY 值为数字（不带单位，非字符串） 树的中心 Y 坐标
• treeEleMargin 值为数字（不带单位，非字符串） 元素的上下边距

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

API

SDT.SVGDragComponent()

对组件进行配置，接受一个参数，参数类型为对象，对象字面量应符合 “配置方法 2: 在新的 JS 文件中进行配置” 中所规定的格式

SDT.SVGDragComponent(set_o);

SDT.backCenter()

返回画布中心，不接受参数

document.getElementById("btn-1").addEventListener("click", function () {
	SDT.backCenter();
});

SDT.removeELe()

删除元素，接受一个参数，参数类型为数组，数组元素应为要删除的元素的 id 注: 若不传入参数则删除最近放置的元素

document.getElementById("btn-2").addEventListener("click", function () {
	var rLis =["icon-2-3","icon-3-1","icon-1-1"]
	SDT.removeELe(rLis);
});

document.getElementById("btn-3").addEventListener("click", function () {
	SDT.removeELe();
});

SDT.returnTree()

返回树，接受一个参数，参数类型为值为 true 或 false 的变量，若值为 true 则返回精简树（元素只包含 id 、 name 、 foresideObjId 、 childEles 信息），不可用于重绘；若值为 false 则返回完整树，完整树可用于重绘 注: 重绘要求有页面有图标信息，即相应的 class = "sdt-drag-element-lis" 的

var intTree = SDT.returnTree(true);

SDT.drawInputTree(intTree);

Object.defineProperty(SDT.dropErrorMsg, 'dataDropError', {
	set: function (msg) {
		alert(msg);
	}
});