通过 jsPlumb 检测每个连接

Question

我正在使用 jsPlumb 在我的应用程序中的 div 之间创建连接。

我想知道当一个人点击一个按钮时，是否有办法检查哪些元素是连接的。

jsPlumb.bind("ready", function () {

                    var anEndpointSource = {
                        endpoint: "Rectangle",
                        maxConnections: -1,
                        isSource: true,
                        isTarget: false,
                        anchor: [0, 0.2, 1, 0, 0, -25],
                        paintStyle: { fillStyle: "blue" }
                    };

                    var anEndpointDestination = {
                        endpoint: "Dot",
                        maxConnections: -1,
                        isSource: false,
                        isTarget: true,
                        anchor: [1, 0.2, 1, 0, 0, -25],
                        paintStyle: { fillStyle: "blue" }
                    };
                    var els = document.querySelectorAll(".DTable");
                    var div = $('.DTable');

                    jsPlumb.draggable(els, {
                        dragOptions: ""
                    });


                    jsPlumb.addEndpoint(
                        div,
                        anEndpointSource
                    );

                    jsPlumb.addEndpoint(
                        div,
                        anEndpointDestination
                    );

                });

<div id="test" class="DTable" data-Id="1">
        <h4 spellcheck="false"><input placeholder="TableNavn" /></h4>
        <div class="Properties">
            <table class="table">
                <thead>
                    <tr>
                        <td>Key</td>
                        <td>Column name</td>
                        <td>Type</td>
                        <td>Settings</td>
                    </tr>
                </thead>
                <tbody>
                    <tr data-Id="1" data-required="No">
                        <td><input type="checkbox" class="form-control" name="Key" /></td>
                        <td><input type="text" class="form-control" /></td>
                        <td>
                            <select class="form-control">
                                <option value="int">int</option>
                                <option value="guid">guid</option>
                                <option value="string">string</option>
                                <option value="bool">bool</option>
                            </select>
                        </td>
                        <td>
                            <span class="fa fa-2x fa-cogs"></span>
                        </td>
                    </tr>
                </tbody>
            </table>
            <hr />
            <span class="fa fa-2x fa-plus-circle"></span>
        </div>
    </div>

当每个div被创建一个唯一的属性div-Id="Unique"，所以它可以通过class和data-*获取target。

假设一个人创建了 3 个 div，并将 div1 和 div3 连接起来。然后他按下按钮，它写道 div1 和 div3 已连接。

Answer 1

使用此代码

var connected = jsPlumb.getConnections();
    $.each(connected, function (e, s) {
         console.log(s.source);
         console.log(s.target);
    })