JSFiddle - React, Tailwind, and code Playground

by sporritt

HTML

<script src="http://jsplumb.org/js/jquery.jsPlumb-1.3.8-all-min.js"></script>
<div class="resistencia component" id="uno" data-type="resistencia">UNO</div>
<div class="resistencia component" id="dos" data-type="resistencia">DOS</div>
<div class="condensador component" id="tres"data-type="condensador">TRES</div>
<div class="condensador component" id="cuatro"data-type="condensador">CUATRO</div>

<button id="btn">ver conexiones</button>

<div id="debug"></div>

CSS

.component {
   position:absolute;
   width:5em;
   height:1em;
   border:1px solid black;   
   text-align:center;   
   z-index:5;    
}

#btn {
    position:absolute;
    right:0;
    top:30px;
}

#debug {
    width:100%;
 height:5em;
position:absolute;
 bottom:0px;
border:1px solid red;        
}

#uno { top:20px; left:20px; }
#dos { top:200px; left:200px; }
#tres { top:300px; left:100px; }
#cuatro { top:100px;left:200px; }

JavaScript

jsPlumb.ready(function() {
   
    var endpointOptions = { 
      isSource:true, 
      isTarget:true,
        maxConnections:-1
    };

    // para anadir un endpoint a todos los elementos que tienen una classe, hay que usar un selector jQuery, no solo el nombre de la classe ( $(".resistencia"), no ".resistencia"). 
    var puntos1 = jsPlumb.addEndpoint($(".component"),
    { anchor: [0, 0.25, 0, 0] }, endpointOptions
     );      
    
    // puntos1 tiene 3 Endpoints, uno por elemento.
    
    var puntos2 = jsPlumb.addEndpoint($(".component"), { anchor: [1, 0.25, 0, 0] }, endpointOptions );
    // puntos2 tambien tiene 3 Endpoints.

    // unas conexiones...
    jsPlumb.connect({source:puntos2[0], target:puntos1[1]});          
        jsPlumb.connect({source:puntos1[0], target:puntos1[2]});     
        jsPlumb.connect({source:puntos2[1], target:puntos2[2]});  

    // buscar las conexiones de un elemento
    var conexiones = function(id) {
        var cons = jsPlumb.getConnections({source:id});
        var s = "<div>" + id + ":";
        for (var i = 0; i < cons.length; i++) {
            var unCon = cons[i];
            // el nombre de cada target es 'targetId' (el id del elemento). tambien aqui estoy leyendo el atributo "data-type" del target.
            s += unCon.targetId + " [" + unCon.target.attr("data-type") + "] ";        
        }
        s += "</div>";
        // escribir al div debug
        $("#debug").append(s);
    };        

    $("#btn").bind("click", function() {
        $("#debug").empty();
        conexiones("uno");
        conexiones("dos");
        conexiones("tres");
        conexiones("cuatro");    
    });
    
});