Question

我正在使用jsPlumb创建一个包含两列的匹配小部件。

jsPlumb实例创建为：

var container = $element.find('.match-widget .widget-output:not(.edit)');

jsPlumb.getInstance({
        PaintStyle: {
          lineWidth: 6,
          strokeStyle: '#567567',
          outlineColor: 'black',
          outlineWidth: 1
        },
        MaxConnections: -1,
        LogEnabled: true,
        Anchors: ['Center', 'Center'],
        DragOptions: {
          cursor: 'pointer',
          zIndex: 2000
        },
        Connector: ['Bezier', {
          curviness: 30
        }],
        Endpoints: [
          ['Dot', {
            radius: 11
          }],
          ['Dot', {
            radius: 11
          }]
        ],
        EndpointStyles: [{
          fillStyle: '#FF7D19'
        }, {
          fillStyle: '#FF7D19'
        }],
        Container: container
});

我创建了源和目标，如：

jsPlumb.makeSource($(element[0]).find('.match-source-anchor')[0], {
    maxConnections: 1,
    uniqueEndpoint: true,
    isSource: true,
    enabled: true
 });

 jsPlumb.makeTarget($(element[0]).find('.match-target-anchor')[0], {
    uniqueEndpoint: true,
    isTarget: true,
    maxConnections: 1,
    enabled: true
 });

连接过程正常。但是如果我删除连接后进行一次连接后的问题，连接终点仍然可见。

我尝试添加配置“_deleteOnDetach”，我也尝试删除connectionDetach上的端点。在这两种情况下，终点都被删除了，但在我尝试连接相同的元素时会出现错误。

那么有人可以帮我解决一下吗？

演示：jsfiddle

Answer 1

通常在删除连接时，通常会删除它的端点。在端点设置为唯一的情况下，有一个例外，在这种情况下，端点不会被删除。

请参阅jsPlumb代码：

// if unique endpoint and it's already been created, push it onto the endpoint we create. at the end
// of a successful connection we'll switch to that endpoint.
// TODO this is the same code as the programmatic endpoints create on line 1050 ish
if (def.uniqueEndpoint) {
  if (!def.endpoint) {
    def.endpoint = ep;
    ep._deleteOnDetach = false;
    ep._doNotDeleteOnDetach = true;
  }
  else
    ep.finalEndpoint = def.endpoint;
}

jsPlumb删除连接分离的端点

1 个答案: