创建后更改 Anchor ID 后端点不再与 Anchor 一起拖动 - JSPlumb

Question

我正在构建一个编辑器，当我将一个形状（还需要为该形状输入 ID）放置到 canvas 上时，端点将被创建并附加到该形状。形状的 ID 用于端点锚定。

   //Function which anchors endpoints onto shapes.

   var _addEndpoints = function (sourceAnchors, targetAnchors, id) {
   
    for (var i = 0; i < sourceAnchors.length; i++) {
        var sourceUUID = sourceAnchors[i];
 
        epp = jsPlumbInstance.addEndpoint(id, sourceEndpoint, {
            anchor: sourceAnchors[i], uuid: sourceUUID
        });
        sourcepointList.push([id , epp]);
        epp = null;
    }
    for (var j = 0; j < targetAnchors.length; j++) {
        var targetUUID = targetAnchors[j];
        epp = jsPlumbInstance.addEndpoint(id, targetEndpoint, {
            anchor: targetAnchors[j], uuid: targetUUID
        });
        
        endpointList.push([id, epp]);
        epp = null;
    }

};

function drawElement(element, canvasId, id) {
    $(canvasId).append(element);
    _addEndpoints(properties[0].startpoints, properties[0].endpoints, id);
    jsPlumbInstance.draggable(jsPlumbInstance.getSelector(".jtk-node"), {
        grid: [20, 20]
    });         
  }

这工作得很好，因为端点工作正常并随形状一起拖动，但是我希望我的编辑器的一个功能是能够在单击形状后更改 ID。当 ID 更改时，端点不再随形状一起拖动。然而，他们仍然在那里拖延。我已尝试通过更新锚点和元素来更新端点中的 ID。

  //My solution attempt
  jsPlumbInstance.selectEndpoints().each(function(endpoint) {
      endpoint.setElement(anchor); //anchor is the same anchor as before with updating ID.
      endpoint.setAnchor(x, y, newID);  //new ID is the new ID the anchor now has
  });

但是我得到以下错误。

jsPlumb function failed : TypeError: Cannot read property 'el' of undefined

查看端点的属性，有很多属性仍然具有旧 ID 值，我不知道如何同时更新所有这些。谁能帮帮我？

Answer 1

最终找到了一个相当简单的修复方法，而不是我之前所做的，下面的方法可以解决问题

jsPlumbInstance.setId(oldID, ID);

上面的实例告诉 JSPlumb 为您更改 ID，同时更新 JSPlumb 中各处的 ID，而不是手动更改 anchorID 然后对端点执行相同的操作。

Answer 2

针对 4.x 用户的说明 - jsPlumb 不再在内部使用 DOM id，因此这在 4.x 中不会成为问题。

创建后更改 Anchor ID 后端点不再与 Anchor 一起拖动 - JSPlumb

Endpoint no longer drags with Anchor after Anchor ID is changed after creation - JSPlumb

javascript

jsplumb