JavaScript - 元素 .offsetLeft 和 .offsetTop - 零星值

Question

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

看起来 element/div 有点乱，哈哈

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

---

jsfiddle HERE

ps，点击 div 的一个 Angular 并四处移动以查看我的意思是什么最完整

---

* {
    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。