在两个div（多个连接）之间画一条线

Question

我有一个div（＆＃34; grid＆＃34;）充满了图像（＆＃34;组件＆＃34;）。我能够将组件拖放到网格上，但现在我希望能够从一个组件到另一个组件绘制线条。我正在使用一个名为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

您可以使用事件对象获取mouseup上的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