js拖拽遇到的问题，待解决-蒲公英云

js拖拽遇到的问题，待解决

女爷i 2022-07-28 04:13 290阅读 0赞

以下拖拽代码，遇到一个问题，点击拖拽狗狗后，鼠标松开，继续移动鼠标，狗狗仍是被拖拽状态，得再次点击鼠标，释放拖拽事件。
我百思不得其解，猜测是不是document.onmouseup没有准确的检测鼠标的释放，诶，不知道

window.onload = function() { 
    drag();
}
function drag() { 
    var oDog = document.getElementById("dog");
    oDog.onmousedown = fnDown;
}
function fnDown(event) { 
    event = EventUtil.getEvent();
    var oDog = document.getElementById('dog'),
        disX = event.clientX - oDog.offsetLeft,
        disY = event.clientY - oDog.offsetTop;
    document.onmousemove = function(event) { 
        if (oDog.onmousedown) {
            fnMove(event, disX, disY);
        }
    }
    document.onmouseleave = document.onmouseup = function() { 
        document.onmousemove = null;
        document.onmouseup = null;
    }
    document.onmouseup = function() { 
        document.onmousemove = null;
        document.onmouseup = null;
    }
}
function fnMove(e, posX, posY) { 
    var oDog = document.getElementById('dog'),
        l = e.clientX - posX,
        t = e.clientY - posY,
        winW = document.getElementById("backhome").offsetWidth,
        winH = document.getElementById("backhome").offsetHeight,
        maxW = winW - oDog.offsetWidth,
        maxH = winH - oDog.offsetHeight;
    if (l < 0) {
        l = 0;
    } else if (l > maxW) {
        l = maxW;
    }
    if (t < 0) {
        t = 0;
    } else if (t > maxH) {
        t = maxH;
    }
    oDog.style.left = l + 'px';
    oDog.style.top = t + 'px';
}