Search code examples
javascriptjqueryjsplumb

Drawing a line between two divs (multiple connections)

I have a div ("grid") full of images ("components"). I am able to drag and drop components onto the grid but now I want to be able to draw lines from one component to another. I am using a plugin called jsPlumb where you can pass a source div id and a destination div id and it will draw the line for you. I want the user to be able to make multiple connections to the different components so I am trying to allow a user to right click drag from one component to another and then create the connection. I am not sure how to do this...

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

Example of what it might look like: enter image description here

I want to drag a connection from start to end.... What is the best way of doing this?

Solution

  • You would use the event object to get the ID on the mouseup. Filter for right click or left or however you wanna do it, but this is the basics of grabbing the id

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

    DEMO