在 mouseup 事件后单击时移动的 SVG 路径答案

【问题标题】：SVG path moving on clicking after mouseup event在 mouseup 事件后单击时移动的 SVG 路径
【发布时间】：2021-04-04 15:31:38
【问题描述】：

我正在尝试使用 SVG 线连接两个动态创建的 div。为了做到这一点，我为每个 div 创建了一个输出端口，从 SVG 路径开始。在从输出端口单击并拖动鼠标时，SVG 路径会移动并跟随光标。但是，当我点击其他地方完成后，它会改变它的位置。基本上，它的路径在鼠标向上事件之后得到更新。无论我单击何处，鼠标上移后该行都不应移动。我无法理解代码中的错误。

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

})

【问题讨论】：

也许使用单个 SVG 元素和 D3 库进行拖动会更好？
我的最终项目中将有很多连接器/线路，具体取决于用户将进行的连接。另外，我对d3不是很熟悉。 @MichaelRovinsky

标签： javascript jquery svg gsap

【解决方案1】：

你必须取消绑定 mouseup，但你也必须精确相同的选择器：（我建议你使用 .off，不推荐使用 .unbind）

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

当然，在取消绑定不同的事件之后，你必须再次绑定（.on）才能重新激活另一个路径。

【讨论】：