Question

我创建了一个小节点表，我可以通过输入不同节点的ID来拖放连接并创建连接。

我无法从the docs弄清楚或在网上找到任何关于如何获取与哪些内容相关的数据的示例，以及我使用jsPlumb.getConnections()或{{1}找到的示例}或jsPlumb.isSource或其他任何内容。

有谁知道我将如何实现某种功能，告诉我哪些ID与什么有关？

JavaScript的：

isTarget

HTML：

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
}

Answer 1

每当创建连接时，将触发“jsPlumbConnection”。因此，您需要绑定该事件以存储连接详细信息。代码：

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

<强>更新

事件名称现已更改为连接（Source），而不是 jsPlumbConnection

如何在jsPlumb中获取连接数据

1 个答案: