Zeichnen einer Linie zwischen zwei Divs (mehrere Verbindungen)

Question

Ich habe ein div ("Gitter") voller Bilder ("Komponenten"). Ich kann Komponenten auf das Raster ziehen und ablegen, aber jetzt möchte ich Linien von einer Komponente zur anderen zeichnen können. Ich benutze ein Plugin namens jsPlumb, wo Sie eine Quell-Div-ID und eine Ziel-Div-ID übergeben können, und es wird die Zeile für Sie zeichnen. Ich möchte, dass der Benutzer mehrere Verbindungen zu den verschiedenen Komponenten herstellen kann. Daher versuche ich, einem Benutzer das Ziehen mit der rechten Maustaste von einer Komponente zur anderen zu ermöglichen und dann die Verbindung zu erstellen. Ich bin nicht sicher, wie dies zu tun ...

$(document).on("mousedown",".component", function (e) { 
    if (e.which == 3) 
    { 
     //I get can get the source id fine. 
    } 
}).on("mouseup", function (e) { 
    if (e.which == 3) 
    { 
     //Cannot get the destination component id here 
    } 
}); 

Beispiel von dem, was es aussehen könnte:

ich eine Verbindung vom Anfang bis zum Ende ziehen will .... Was ist das Beste Art und Weise dies zu tun?

Answer 1

Sie würden das Ereignisobjekt verwenden, um die ID auf dem MouseUp zu erhalten. Filter für Rechtsklick oder nach links oder aber Sie wollen es tun, aber das ist die Grundlagen der Grabbing die ID

$(document).on("mousedown",".component", function (e) { 
    var first_id = e.target.id; 
}).on("mouseup", function (e) { 
    var second_id = e.target.id; 
}); 

DEMO

Answer 2

die erste Ihnen helfen können.

fügen Sie es hinzu! Ich denke, es ist flexibel.

"$ (this)" kann Ihnen helfen, die Frage zu lösen.

Verwenden Sie $ (this), Sie können das Element erhalten, das Sie seinen Stil ändern möchten.

$(document).on('mousedown','.component', function (e) { 
    $(this).css('background','blue'); 
    $('.chosen').html('Chosen ID:'+ $(this).html()); 
}); 
$(document).on('mouseup','.component', function (e) { 
    $(this).css('background','yellow'); 
    $('.chosen').html("Chosen ID:"+ $(this).html()); 
}); 

demo