JS-Plumb：（重新）点击后在两个元素之间画一条线

Question

编辑：在尝试了不同的手工解决方案后，我正在使用 JSPlumb 并尝试让它在视觉上将一个列表中的点击项目与另一个列表中的点击项目联系起来（见屏幕截图）。

我在此基础上构建 Whosebug thread 并使其基本工作，但是那里提供的代码允许多个连接，即 JSPlumb 绘制多个端点和线，如果 'Target' 它不会做出反应首先被点击。但是，在我的情况下，严格来说应该只有一个连接，一旦我单击任一侧的另一个列表项，JSPlumb 应该会重新连接。（例如，我点击 'Source 1' 和 'Target 3'，JSPlumb 绘制连接。我点击 'Target 4'，JSPlumb 应该保持 'Source 1' 作为源并重新设置 'Target 4'作为目标，例如现在绘制从 'Source 1' 到 'Target 4' 的连接。单击不同的 'Source' 也是如此，即目标应保持不变。）

我需要以何种方式更改代码才能实现所需的重绘？

CodePen

jQuery(document).ready(function () {  
   var targetOption = {
        anchor: "LeftMiddle",
        isSource: false,
        isTarget: true,
        reattach: true,
        endpoint: "Dot",
        connector: ["Bezier", {
                   curviness: 50}],
        setDragAllowedWhenFull: true
    };

    var sourceOption = {
        tolerance: "touch",
        anchor: "RightMiddle",
        maxConnections: 1,
        isSource: true,
        isTarget: false,
        reattach: true,
        endpoint: "Dot",
        connector: ["Bezier", {
                   curviness: 50}],
        setDragAllowedWhenFull: true
    };

    jsPlumb.importDefaults({
        ConnectionsDetachable: true,
        ReattachConnections: true,
        Container: 'page_connections'
    });

    //current question clicked on
    var questionSelected = null;
    var questionEndpoint = null;

    //remember the question you clicked on
    jQuery("#select_list_lebensbereiche ul > li").click( function () {

        //remove endpoint if there is one
        if( questionSelected !== null )
        {
            jsPlumb.removeAllEndpoints(questionSelected);
        }

        //add new endpoint
        questionSelected = jQuery(this)[0];
        questionEndpoint = jsPlumb.addEndpoint(questionSelected, sourceOption);
    });

    //now click on an answer to link it with previously selected question
    jQuery("#select_list_wirkdimensionen ul > li").click( function () {

        //we must have previously selected question
        //for this to work
        if( questionSelected !== null )
        {
            //create endpoint
            var answer = jsPlumb.addEndpoint(jQuery(this)[0], targetOption);

            //link it
            jsPlumb.connect({ source: questionEndpoint, target: answer }); 
            //cleanup
            questionSelected = null;
            questionEndpoint = null;
        }
    }); 

});

Answer 1

您已经在全局变量中跟踪链接项的“源”端；达到你想要的行为的一种方法大多只需要以同样的方式跟踪“目标”结束。（还有改进的余地——全局变量可能不是一个理想的策略，并且 'source' 和 'target' 点击处理程序之间存在一些代码重复，但这至少应该用于演示。）

  // ...other init variables skipped

  var questionEndpoints = []; // 'source' and 'target' endpoints

  // "source" click handler
  jQuery("#select_list_lebensbereiche ul > li").click(function() {
    //remove existing start endpoint, if any:
    jsPlumb.deleteEndpoint(questionEndpoints[0]);
    // add a new one on the clicked element:
    questionEndpoints[0] = jsPlumb.addEndpoint(jQuery(this), sourceOption);
    connectEndpoints();
  });
  
  // "target" endpoint
  jQuery("#select_list_wirkdimensionen ul > li").click(function() {
    if (!questionEndpoints[0]) return; // don't respond if a source hasn't been selected
    // remove existing endpoint if any
    jsPlumb.deleteEndpoint(questionEndpoints[1]);
    //create a new one:
    questionEndpoints[1] = jsPlumb.addEndpoint(jQuery(this), targetOption);
    connectEndpoints();
  });

  var connectEndpoints = function() {
    jsPlumb.connect({
      source: questionEndpoints[0],
      target: questionEndpoints[1]
    });
  };
});

Working CodePen example

JS-Plumb：（重新）点击后在两个元素之间画一条线

JS-Plumb: (Re-)Draw a line between two elements after clicking

javascript

jquery

jsplumb