Обнаружение каждого соединения с помощью 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-Id="Unique", так что он может получить цель по классам и данных- *.

Допустим, что человек создает 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); 
    })