摘要：社区版本为开发者在他们的网页上提供可视化的元素连接。在现代的浏览器使用，在和以下版本使用。建议用户自己设置。到目前为止，一个在每个终点都有，在中间有一个标签，添加四个元素，实际添加的元素取决于渲染器使用的是还是。
jsPlumb社区版本为开发者在他们的网页上提供可视化的元素连接。在现代的浏览器使用SVG，在IE8和以下版本使用VML。
jsPlumb没有额外的依赖。
加载和配置jsPlumb默认是注册在浏览器的窗口（window）的，为整个页面提供静态实例。你也可以多带带实例化，使用getInstance 模块，例如
var firstInstance = jsPlumb.getInstance();
变量firstInstance现在和jsPlumb变量一样使用，你可以使用importDefault设置默认参数，调用connect函数：
firstInstance.importDefaults({
Connector : [ "Bezier", { curviness: 150 } ],
Anchors : [ "TopCenter", "BottomCenter" ]
});
firstInstance.connect({
source:"element1",
target:"element2",
scope:"someScope"
});
getInstance也可以带参数
var secondInstance = jsPlumb.getInstance({
PaintStyle:{
lineWidth:6,
strokeStyle:"#567567",
outlineColor:"black",
outlineWidth:1
},
Connector:[ "Bezier", { curviness: 30 } ],
Endpoint:[ "Dot", { radius:5 } ],
EndpointStyle : { fillStyle: "#567567" },
Anchor : [ 0.5, 0.5, 1, 1 ]
});
secondInstance.connect({
source:"element4",
target:"element3",
scope:"someScope"
});
建议自己进行实例化。
元素IDjsPlumb通过id和元素交互，如果id没有设置，jsPlumb会自动设置一个。建议用户自己设置。
因为jsp通过id管理元素，所以你得通知jsPlumb元素id的变化，
*jsPlumb.setId(el, newId)设置jsPlumb中的元素id
*jsPlumb.setIdChanged(oldId, newId)改变已有jsPlumb中的元素id
jsPlumb中大多数方法提供多种对指定元素进行操作的格式。
jQuery中又选择器的概念，例如$(".myClass")。在jsPlumb中同样适用。
jsPlumb也提供NodeList，有几种方式从DOM获取到NodeList，最好用的方法是document.querySelectorAll("some selector")
使用jsPlumb时，你需要考虑UI部分的z-indices（Z指数），特别是不要让jsPlumb添加到DOM上的元素不要遮盖其他元素的交互。
jsPlumb为Endpoint, Connector and Overlay添加一个元素到DOM上。到目前为止，一个Connection在每个终点都有Endpoint，在中间有一个标签（label），jsPlumb添加四个元素，实际添加的元素取决于渲染器使用的是（SVG还是VML）。
为了让你能正确地组织z参数，jsPlumb给每个元素添加了CSS类，如下
Component Class
Endpoint _jsPlumb_endpoint
Connector _jsPlumb_connector
Overlay _jsPlumb_overlay
另外，无论什么时候，当鼠标经过Endpoint或Connection上时，都会触发_jsPlumb_hover这个类。关于jsPlumb CSS更多类的信息，访问 this page
jsPlumb在哪儿添加元素？知道jsPlumb把新加的元素放在DOM的哪里很重要。如果你想要个简介的版本（TL;DR（too long, didn’t read）），归纳如下：
强烈建议在使用jsPlumb前设置一个容器（Container）
容器就是你用来和jsPlumb添加的元素交互的一个母元素。
如果你没有指定一个容器，jsPlumb会推断你调用addEndpoint、makeSource、makeTarget的方法的第一个元素的offsetParent，或者connect的source元素的offsetParent作为容器。
下面是详情：
早期版本的jsPlumb把body作为容器，好处是在支持那些可以连接（connect）的元素上很灵活，但是在一些具体案例中结果不是预期的。
设想一下，在标签里有几个连接在一起的元素，你想在表单里添加元素，让用户切换表单时当前的可以隐藏，那样所有的jsPlumb相关元素都会被隐藏掉。但是当元素都是在body上时，这就不会发生。
还有就是在一些元素里包含一个图表，在溢出时会显示滑动条，把元素添加到body可以避免这种事自动发生。
你可以通过setContainer指定作为jsPlumb添加元素的容器，或者在jsPlumb.getInstance参数中指定。
重要：如果你使用了jsPlumb的draggable方法使你的UI可以拖拽（不止是通过jsPlumb添加的），会发生意外。建议使用另一个实例操作，如：
var nonPlumbing = jsPlumb.getInstance();
nonPlumbing.draggable("some element");
举个栗子
设置容器，使用jQuery选择机制，添加一个Endpoint，相关UI将作为document body的子元素：
jsPlumb.setContainer($("body"));
jsPlumb.addEndpoint(someDiv, { endpoint options });
通过DOM
jsPlumb.setContainer(document.getElementById("foo"));
jsPlumb.addEndpoint(someDiv, { endpoint options });
通过元素id
jsPlumb.setContainer("containerId");
jsPlumb.connect({ source:someDiv, target:someOtherDiv });`
通过实例化
var j = jsPlumb.getInstance({
Container:"foo"
});
jsPlumb.addEndpoint(someDiv, { endpoint options });
你所选择的容器会有osition:relative,因为jsPlumb通过容器计算新元素添加的位置。
拖拽使用jsPlumb交互，拖拽很常见，可以通过下面来实现：
myInstanceOfJsPlumb.draggable("elementId");
如果你不这么做的话，jsPlumb就不知道元素被拖拽了，就不能重新渲染页面。
更多信息，请访问 this page
执行效率jsPlumb执行速度和处理连接的上限取决于你所运行的浏览器。目前，速度依次是Chrome,Safari,Firefox,IE版本越低执行越慢。
每次调用connect，addEndpoint时都会重新渲染关联节点，大多数情况下这就是你想要的。如果你进行大量操作，建议这样干：
jsPlumb.setSuspendDrawing(true); ...
load up all your data here -
...
jsPlumb.setSuspendDrawing(false, true);
setSuspendDrawing通知jsPlumb要进行大量重绘操作，就是repaintEverything。
这个函数进入悬停绘画（suspending drawing）模式，然后再进入普通绘画模式。
jsPlumb.batch(fn, [doNotRepaintAfterwards]);
举个栗子
jsPlumb.batch(function() {
// import here
for (var i = 0, j = connections.length; i < j; i++) {
jsPlumb.connect(connections[i]);
}
});
这里我们把connections当作一个对象数组，以作为connect函数的参数，例如：
{ source:"someElement", target:"someOtherElement" }
默认，会在函数末尾执行重绘的，但是你可以不这么做，
jsPlumb.batch(function() {
// import here
}, true);
这个方法以前叫doWhileSuspended，1.7.3版本改了名字。
Continuous 需要最大的计算量
Dynamic and Perimeter是次慢的，Dynamic默认有60个位置可供选择
Static和Top`Bottom`一样，是最快的。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/86041.html
摘要：感受最容易最直观是重写的默认配置。有效健，初始值如下注意的是。每条默认设置的解释对于那些没有声明的，对的和也适用。所有的和的给默认使用是否可通过鼠标分离当被请求却不存在时是否报错默认的遮罩可通过配置配置是否可以连接的定义的和默认所有的通过 感受jsPlumb最容易最直观是重写jsPlumb的默认配置。如果你没这么做，你不得不每次调用都得重写这些值。connect和addEndpoint...
摘要：公司项目需要用到绘图框架，绘图部分以前是另一位同事负责，用的是框架。基于以上提及到的种种原因，上年年末我做起了技术调研，希望能找到一个合适我们项目的绘图框架。兼容性问题项目对浏览器兼容性比较宽松，浏览器兼容性问题不在考虑范围之内。 showImg(https://ws3.sinaimg.cn/large/006tKfTcgy1g0ppk2kkhxj30ka0b4gm5.jpg); 公司...
摘要：公司项目需要用到绘图框架，绘图部分以前是另一位同事负责，用的是框架。基于以上提及到的种种原因，上年年末我做起了技术调研，希望能找到一个合适我们项目的绘图框架。兼容性问题项目对浏览器兼容性比较宽松，浏览器兼容性问题不在考虑范围之内。 showImg(https://ws3.sinaimg.cn/large/006tKfTcgy1g0ppk2kkhxj30ka0b4gm5.jpg); 公司...
摘要：使用的一个普通的特性就是元素的拖放。拖拽内嵌元素拖拽多个元素拖拽时文本选中浏览器默认的拖拽行为是选择里的元素。废止了这种行为，没有。为了支持这种情况，被拖拽元素都增加了这个类。在拖拽结束后被去除。 使用jsPlumb的一个普通的特性就是元素的拖放。方法如下：myInstanceOfJsPlumb.draggable(elementId); 接受的参数类型 元素id的字符串 元素 li...
摘要：基于的，支持拖拽生成节点，节点双击展示更多信息，节点连线，删除节点，删除连线，重绘连接图，当前页面刷新连接图，根据画连接图等功能本章主要讲拖拽生成节点获取链接图的信息引入需要的文件因为要用所以引入了画连接图用因为用的所以这样引入拖 基于vue的jsplumb，支持拖拽生成节点，节点双击展示更多信息，节点连线，删除节点，删除连线，重绘连接图，当前页面刷新连接图，根据json画连接图等功能...
阅读 2363·2023-04-26 02:54
阅读 2269·2021-10-14 09:43
阅读 3298·2021-09-22 15:19
阅读 2812·2019-08-30 15:44
阅读 2682·2019-08-30 12:54
阅读 955·2019-08-29 18:43
阅读 1914·2019-08-29 17:12
阅读 1278·2019-08-29 16:40
