javascript - 如何在jsPlumb中获取连接数据

Question

我制作了一个小型节点表，可以从中拖放连接并通过输入不同节点的 id 来创建连接。

我无法从 the docs 中找出答案或者在网上查找有关如何获取有关连接到什么的数据的任何示例，以及我使用 jsPlumb.getConnections() 或 jsPlumb.isSource 或 找到的示例code>isTarget 或其他任何内容。

有谁知道我如何实现某种函数来告诉我哪些 id 连接到什么？

jsFiddle

JavaScript:

var wire_style;
var line_width = 8;

window.onload = function get_styles(){
    wire_style = { 
        isSource:true,
        isTarget:true,
        connector : [ "Straight" ],
        connectorStyle:{ 
            strokeStyle:$('#colour_menu').val(),
            lineWidth:line_width, 
        },
        endpoint: ["Rectangle", {
            radius: 4,
        }],
        //endpointStyle:{ },
        container:$('#breadboard'), 
    };
    var startpoint = jsPlumb.addEndpoint($('.hole'), wire_style);
}

// delete connection when clicked
 jsPlumb.bind('click', function (connection, e) {
     jsPlumb.detach(connection);
 });

// change colour when option selected
$(window).load(function(){
    $('#colour_menu').on('change', function () {
        wire_style.connectorStyle.strokeStyle = $('#colour_menu').val();
    });
});

// connect id one and id two on button click
$(window).load(function(){
    $('#connect_button').on('click', function () {
        var x = $('#x').val();
        var y = $('#y').val();
        connect(x ,y);
    });
});

// connect holes function
function connect(to,from){
    jsPlumb.connect({
        source:from, 
        target:to,
                paintStyle:{ 
            strokeStyle:$('#colour_menu').val(), 
            lineWidth:line_width 
        },
    }, wire_style); // including wire styles
}

HTML:

<script type='text/javascript' src="https://jsplumb.googlecode.com/files/jquery.jsPlumb-1.4.1-all-min.js"></script>

<input type="text" id="x"/>
<input type="text" id="y"/>
<button id="connect_button">Connect</button>


<select id="colour_menu">
<option selected="selected" value="limegreen">  Wire colour</option>
<option class="black"       value="black">      Black   </option>
<option class="red"         value="red">        Red     </option>
<option class="Orange"      value="Orange">     Orange  </option>
<option class="yellow"      value="yellow">     Yellow  </option>
<option class="limegreen"   value="limegreen">  Green   </option>
<option class="DodgerBlue"  value="DodgerBlue"> Blue    </option>
<option class="DarkOrchid"  value="DarkOrchid"> Violet  </option>
</select>

<div id="breadboard">
    <table>
        <tr id="node1" class="node">
            <td><div id="1" class='hole'></div></td>
            <td><div id="2" class='hole'></div></td>
            <td><div id="3" class='hole'></div></td>
            <td><div id="4" class='hole'></div></td>
            <td><div id="5" class='hole'></div></td>
            <td></td>
            <td><div id="6" class='hole'></div></td>
            <td><div id="7" class='hole'></div></td>
            <td><div id="8" class='hole'></div></td>
            <td><div id="9" class='hole'></div></td>
            <td><div id="10" class='hole'></div></td>
        </tr>
        <tr id="node2" class="node">
            <td><div id="11" class='hole'></div></td>
            <td><div id="12" class='hole'></div></td>
            <td><div id="13" class='hole'></div></td>
            <td><div id="14" class='hole'></div></td>
            <td><div id="15" class='hole'></div></td>
            <td></td>
            <td><div id="16" class='hole'></div></td>
            <td><div id="17" class='hole'></div></td>
            <td><div id="18" class='hole'></div></td>
            <td><div id="19" class='hole'></div></td>
            <td><div id="20" class='hole'></div></td>
        </tr>
    </table>
</div>

Answer 1

每当创建连接时，都会触发“jsPlumbConnection”。因此，您需要绑定(bind)该事件来存储连接详细信息。代码:

jsPlumb.bind("jsPlumbConnection", function(ci) { // ci is connection info.
    var s=ci.sourceId,t=ci.targetId;
    console.log(s+" -> "+t);
});

更新:

事件名称现已更改为 connection( Source )，而不是 jsPlumbConnection