JavaScript-element.offsetLeft&。偏移-零星值

我正在尝试设置一个简单的拖放界面，但由于元素偏移值不一致而遇到问题。元素的偏移量是在

mousemove

事件中导出的。这些值将在正确和不正确之间交替。我被难住了

看起来元素/div好像在lol周围跳动

我真的不知道为什么

div.offsetLeft

&

div.offsetTop

会在每次

鼠标移动时在正确值和错误值之间交替。如有任何想法和/或建议，将不胜感激



JSFIDLE

ps，点击div的一个角并移动它，看看我对它的意思是什么



看一看

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

然后你只需给出你的
div
位置
mousepistion+rememberedOffset
我假设，你想在向右拖动时保持div左上角到鼠标光标的距离？如果是的话，那么你尝试的方式就行不通了。值在正确和不正确之间不交替（看起来像事件）。您看到的效果是div的中心围绕光标翻转。您需要存储左/上和鼠标下移动光标之间的距离，并在鼠标移动时使用此距离更新div位置。@t.niese我现在明白了。。。非常感谢。我花了一整夜来修补这个。。。我现在觉得自己有点傻，但不管怎样。欣赏小提琴。非常感谢。
* {
    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);