1

我正在尝试设置一个简单的拖放界面，但由于元素偏移值不一致而遇到了麻烦。元素的偏移量是在mousemove事件中派生的。这些值将在正确和错误之间交替。我难住了！

看起来元素/ div 正在翻来覆去大声笑

我真的不知道为什么div.offsetLeft&div.offsetTop会在正确和不正确的值之间交替变化mousemove。任何想法和/或建议将不胜感激！

jsfiddle在这里

ps，点击 div 的一个角并移动它，看看我的意思是最充分的

* {
    margin:     0;
    padding:    0;
    outline:    none;
}
#pageWrap {
    position:   relative;
    width:      1024px;
    margin:     0 auto;
}
#div {
    position:   absolute;
    top:        0;
    left:       0;
    background: #000;
    overflow:   hidden;
}

<div id="pageWrap">
    <div id="div" style="width:200px; height:200px;"></div>
</div>

var div         = document.getElementById('div'),
    divWidth    = div.clientWidth,
    divHeight   = div.clientHeight,
    divStyle    = div.style,
    pageWrap    = document.getElementById('pageWrap');

function divMove(e) {
    var mouseLeft   = e.clientX - pageWrap.offsetLeft,
        mouseTop    = e.clientY - pageWrap.offsetTop,
        divLeft     = mouseLeft - (div.offsetLeft + divWidth - mouseLeft),
        divTop      = mouseTop - (div.offsetTop + divHeight - mouseTop);

        divStyle.left   = divLeft + 'px';
        divStyle.top    = divTop + 'px';
    }

function divDown(e) {
    if(e.preventDefault) {
        e.preventDefault();
    } else {
        e.returnValue = false;
    }

    if (e.target === div) {
        document.addEventListener('mousemove', divMove, false);
    }
}

function cleanUp() {
        document.removeEventListener('mousemove', divMove, false);
}

document.addEventListener('mousedown', divDown, false);
document.addEventListener('mouseup', cleanUp, false);
4

1 回答 1

2

看看http://jsfiddle.net/qemX6/2/。

当您开始拖动时，您需要记住从 div 的边界到鼠标的距离。这是在x和中完成的y。（就像e.clientX - div.offsetLeft）

然后你只需给出你的div位置mousePoistion + rememberedOffset。

于 2013-04-29T11:23:21.457 回答