首页 > 代码库 > jsPlumb连线库入门
jsPlumb连线库入门
官网演示：https://jsplumbtoolkit.com/demo/flowchart/dom.html
例子：
<!DOCTYPE html><html><head><meta charset="utf-8"><style type="text/css">.item { width: 100px; height: 100px; border: 1px solid purple; position: absolute;}#div1 { left: 100px; top: 100px;}#div2 { left: 200px; top: 500px;}#div3 { left: 500px; top: 100px;}#div4 { left: 400px; top: 400px;}</style><script src="dom.jsPlumb-1.7.2-min.js"></script></head><body><div class="item" id="div1"></div><div class="item" id="div2"></div><div class="item" id="div3"></div><div class="item" id="div4"></div></body><script type="text/javascript">jsPlumb.ready(function() { //jsPlumb.connect({source: "div1", target: "div2", detachable: false}); //jsPlumb.draggable($(".item")); //jsPlumb.draggable(jsPlumb.getSelector(".item")); //$(".item").draggable(); //var greyEndpointOptions = { // endpoint: "Rectangle", // paintStyle: {width: 25, height: 21, fillStyle: "#666"}, // isSource: true, // connectorStyle: {strokeStyle: "#666"}, // isTarget: true //}; //jsPlumb.addEndpoint("div1", {anchor: "Bottom"}, greyEndpointOptions); //jsPlumb.addEndpoint("div2", {anchor: "Top"}, greyEndpointOptions); var endpointOptions = { isSource: true, isTarget: true, //endpoint: ["Dot", {radius: 30}], endpoint: ["Rectangle", {width: 20, height: 10}], style: {fillStyle: "blue"}, //connector: ["Bezier", {curviness: 175}], //connector: "Straight", connector: "Flowchart", connectorStyle: {lineWidth: 20, strokeStyle: "blue"}, scope: "blueline", dragAllowedWhenFull: false, paintStyle: {lineWidth: 25, strokeStyle: "cyan"} }; var div1Endpoint = jsPlumb.addEndpoint("div1", {anchor: "TopCenter"}, endpointOptions); var div2Endpoint = jsPlumb.addEndpoint("div2", {anchor: "BottomCenter"}, endpointOptions); var sourceEndpoint = {isSource: true, endpoint: ["Dot", {radius: 50}]}; var targetEndpoint = {endpoint: ["Rectangle", {width: 10, height: 10}]}; jsPlumb.addEndpoint("div3", sourceEndpoint); jsPlumb.makeTarget("div4", targetEndpoint);});</script></html>
jsPlumb连线库入门
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。