SVG path moving on clicking after mouseup event

Question

I am trying to connect two dynamically created divs using an SVG line. In order to do that I have created an outport for each div from where the SVG path will start. On clicking and dragging the mouse from the outport the SVG path moves and follows the cursor. However, after I am done when I click somewhere else it changes its position. Basically, its path is getting updated after the mouse up event. The line should not move after mouseup no matter where I click. I cannot understand the mistake in my code.

https://codepen.io/iamkrptonite/pen/ExZXjor

$(document).ready(function(){
    const boundary = $(".boundary")
    const outport = $(".outport")
    const bezierWeight = 0.6;
    var boxX = boundary[0].offsetLeft;
    var boxY = boundary[0].offsetTop;
    $(boundary).click(function(){
        console.log("boom")
    })

    $(outport).on("mousedown",function(e){
        var imouseX = e.pageX-boxX;
        var imouseY = e.pageY-boxY;
        $(boundary).on("mousemove",function(e){
            var mouseX = e.pageX-boxX;
            var mouseY = e.pageY-boxY;
            updateBoxesPath(imouseX,imouseY,mouseX,mouseY);
        }).mouseup(function (e) {
            var mouseX = e.pageX-boxX;
            var mouseY = e.pageY-boxY;
            updateBoxesPath(imouseX,imouseY,mouseX,mouseY);
            $(this).unbind('mousemove');
            $(this).unbind('mousedown');
            $(this).unbind('mouseclick');
        })
    }).mouseup(function(){
        $(this).unbind('mousemove');
        $(this).unbind('mousedown');
        $(this).unbind('mousedown');
    })



    function updateBoxesPath(imouseX,imouseY,mouseX,mouseY) {
        var boxPath = document.getElementById("boxPath_0");
        var x1 = imouseX;
        var y1 = imouseY;
        var x4 = mouseX;
        var y4 = mouseY;
        var dx = Math.abs(x4 - x1) * bezierWeight;
        var x2 = x1 + dx;
        var x3 = x4 - dx;
        var boxData = `M${x1} ${y1} C ${x2} ${y1} ${x3} ${y4} ${x4} ${y4}`;
        boxPath.setAttribute("d", boxData);
    }

})

user_7380779 · Answer

you have to unbind mouseup, but you have to precise the same selector too: (i suggest you to use .off, .unbind is deprecated)

$(outport).on("mousedown",function(e){
    var imouseX = e.pageX-boxX;
    var imouseY = e.pageY-boxY;
    $(boundary).on("mousemove",function(e){
        var mouseX = e.pageX-boxX;
        var mouseY = e.pageY-boxY;
        updateBoxesPath(imouseX,imouseY,mouseX,mouseY);
    }).mouseup(function (e) {
        var mouseX = e.pageX-boxX;
        var mouseY = e.pageY-boxY;
        updateBoxesPath(imouseX,imouseY,mouseX,mouseY);
        $(boundary).off('mousemove mouseup');
        $(outport).off('mousedown');
    })
});

Of course after to unbind the different events, you have to bind again (.on) to reactivate for another path.

SVG path moving on clicking after mouseup event

1 Answers