通过 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 个 divs，并连接了 div1 和 div3。然后他按下按钮，它写道 div1 和 div3 已连接。

Answer 1

使用此代码

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

通过 jsPlumb 检测每个连接

Detect each connection by jsPlumb

jquery

html

asp.net-mvc

jsplumb