jquery connect()使用现有端点而不是创建新端点

azpvetkf  于 2023-08-04  发布在  jQuery
关注(0)|答案(5)|浏览(135)

我在jsPlumb.connect函数上遇到了一个问题。我有一个应用程序,用户可以在其中添加<div>元素,这将获得jsPlumb端点。用户可以将所有这些元素相互连接。图表可以保存在MySQL数据库中(JSON格式)。
当用户从数据库加载图表时,我可以使用addElementaddEndpoint函数重新创建元素和端点。但是当我调用jsPlumb Connect方法(调用该方法只是为了从数据库创建图表)来绘制连接线时,它会为每个连接的元素创建一个新的端点。
如何防止每次调用connect方法时创建新的终结点?

uinbv5nw

uinbv5nw1#

在添加端点时,请确保您也根据它所放置的元素为其分配uuid。您可以在jsPlumb中连接两个端点:

jsPlumb.ready(function () {  
     var e0 = jsPlumb.addEndpoint("container0",{uuid:"ep0"}), //set your own uuid for endpoint to access later.
     e1 = jsPlumb.addEndpoint("container1",{uuid:"ep1"});  
     jsPlumb.connect({ uuids:[e0.getUuid(),e1.getUuid()] }); 
             // (or) 
     jsPlumb.connect({ uuids:["ep0","ep1"] });
});

字符串

sqxo8psd

sqxo8psd2#

这是一个非常老的问题,但我想我会分享一种不涉及使用UUID的方法:

var endpoint1 = jsPlumb.getEndpoints("id of node1")[0];
var endpoint2 = jsPlumb.getEndpoints("id of node2")[0];
jsPlumb.connect({source: endpoint1, target: endpoint2});

字符串
请注意,当每个节点有一个端点时,这是最好的,但是如果您可以过滤getEndpoints返回的数组以找到所需的端点,那么这也可以工作。

ui7jx7zq

ui7jx7zq3#

虽然这是一个很久以前就被问到的问题,但它仍然占用了我很多时间。对于2.5版的jsplumb,使用uuids的jsplumb.connect()可能会导致错误:找不到源。要解决这个问题,应该使用jsPlumb示例(instance.connect())的作用域。

iqih9akk

iqih9akk4#

在添加端点时,请确保您也根据放置端点的元素为其分配Uuid。您可以在jsPlumb中连接两个端点作为

<script type="text/javascript" src="Jquery\jq.js"></script>
<script type="text/javascript" src="Jquery\jq-ui.min.js"></script> 
<script type="text/javascript" src="jsPlumb-master\build\demo\js\jquery.jsPlumb-1.4.1-all-min.js"></script>

字符串

<div id="main">
<div id="block1" class="node">node 0</div>
<div id="block2" class="node">node 1</div>
<div id="block3" class="node">node 2</div>
<div id="block4" class="node">node 3</div> 
</div>

  <script type="text/javascript">

  var targetOption = {anchor:"TopCenter",
  maxConnections:-1,
  isSource:false,
  isTarget:true,
  endpoint:["Dot", {radius:8}],
  paintStyle:{fillStyle:"#66FF00"},
  setDragAllowedWhenFull:true}

  var sourceOption = {anchor:"BottomCenter",
  maxConnections:-1,
  isSource:true,
  isTarget:false,
  endpoint:["Dot", {radius:8}],
  paintStyle:{fillStyle:"#FFEF00"},
  setDragAllowedWhenFull:true}

   jsPlumb.bind("ready", function() {

  jsPlumb.addEndpoint('block1', targetOption);
  jsPlumb.addEndpoint('block1', sourceOption);

  jsPlumb.addEndpoint('block2', targetOption);
  jsPlumb.addEndpoint('block2', sourceOption);

  jsPlumb.addEndpoint('block3', targetOption);
  jsPlumb.addEndpoint('block3', sourceOption);

  jsPlumb.addEndpoint('block4', targetOption);
  jsPlumb.addEndpoint('block4', sourceOption);

  jsPlumb.draggable('block1');
  jsPlumb.draggable('block2');
  jsPlumb.draggable('block3');
  jsPlumb.draggable('block4'); 
  });

  </script>

mdfafbf1

mdfafbf15#

我在SO论坛之外从作者那里得到了解决。

正确格式:

paintStyle: { 
 stroke:"blue", //renamed to "stroke" from "strokeStyle"
 strokeWidth:10 
}

字符串

相关问题