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

Question

我有一个 div ("grid") 装满图像 ("components")。我可以将组件拖放到网格上，但现在我希望能够从一个组件到另一个组件画线。我正在使用一个名为 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

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

Drawing a line between two divs (multiple connections)

javascript

jquery

jsplumb