jsドラッグで発生した問題は解決されるべきです.

3237 ワード

次のコードをドラッグして、問題が発生したら、ドラッグした犬をクリックして、マウスを放して、マウスを移動し続けます.犬はまだドラッグされた状態です.もう一度マウスをクリックして、ドラッグを解除します.私は何も考えられません.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';

}