Question

我正在尝试设置一个简单的拖放界面，但由于元素偏移值不一致而遇到麻烦。元素的偏移量是在mousemove事件中派生的。值将在正确和不正确之间切换。我很难过！
有点看起来元素/ div正在徘徊lol

我真的不知道为什么div.offsetLeft＆amp; div.offsetTop将在每个mousemove之间在正确值和不正确值之间切换。任何想法和/或建议将不胜感激！

jsfiddle HERE

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

Answer 1

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

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

然后，您只需提供div mousePoistion + rememberedOffset位置。

JavaScript - 元素.offsetLeft＆amp; .offsetTop - 零星价值观

1 个答案: