Javascript 在两个div（多个连接）之间绘制一条线

我有一个充满图像（“组件”）的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
    }
});

它可能看起来像什么的示例：

---

我想将连接从开始拖到结束。。。。执行此操作的最佳方法是什么？

您可以使用事件对象获取鼠标上的ID。过滤右键点击、左键点击或你想怎么做，但这是获取id的基础

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

---

第一个可以帮助你

加上它！我认为它是灵活的

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

---

我的答案对你有用吗？不过我注意到了一个很奇怪的错误。如果在选择后单击对象，则效果良好。但是，如果您尝试在不单击对象的情况下来回移动，它将停止工作。那么威德。例如，单击元素1并拖动到元素2。现在单击元素2，并拖动到1。不起作用。但是如果你点击了元素，那么就去做。它起作用了