2つのdivの間に線を描く（複数の接続）

Question

私は画像（「コンポーネント」）でいっぱいのdiv（グリッド）を持っています。グリッドにコンポーネントをドラッグ＆ドロップすることはできますが、今はコンポーネント間で線を引くことができるようにしたいと考えています。 jsPlumbという名前のプラグインを使用しています。このプラグインでは、ソースdiv IDと宛先div IDを渡すことができます。ユーザーが異なるコンポーネントに複数の接続を行うことができるようにしたいので、あるコンポーネントから別のコンポーネントに右クリックしてドラッグして接続を作成できるようにしたいと考えています。何が最善か.... ​​

私は開始から終了までの接続をドラッグしたい：私はそれがどのように見えるかの

$(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 
    } 
}); 

例が...これを行う方法を確認していませんこれを行う方法？

Answer 1

イベントオブジェクトを使用して、マウスアップでIDを取得します。右クリックまたは左またはしかし、あなたたいが、それを行うためのフィルタが、これは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

最初はあなたを助けることができるをつかむの基本です。

追加！私はそれが柔軟であると思う。

"$（this）"はあなたが質問を解決するのに役立ちます。

$（this）を使用すると、そのスタイルを変更したい要素を取得できます。

$(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