如何在单击时修复此 div 的偏移 x 位置？答案

【问题标题】：How to fix the offset x position of this div on click?如何在单击时修复此 div 的偏移 x 位置？
【发布时间】：2015-04-09 19:30:30
【问题描述】：

使用 vanilla JavaScript 处理面板拖动功能。

现在卡在如何正确偏移拖动器 div 的 x 位置，使其不会对齐到光标的右侧。

我将如何更正下面的x 偏移量？

http://jsfiddle.net/leongaban/rrcL63y9/41/

window.onload = addListeners();

var xPosition = 0;

function addListeners() {
    document.getElementById('drag-container').addEventListener("click", getClickPosition, false);

    document.getElementById('dragger').addEventListener('mousedown', mouseDown, false);
    window.addEventListener('mouseup', mouseUp, false);
}

function getClickPosition(e) {
    xPosition = e.clientX;
    console.log(xPosition);
}

function mouseUp() {
    window.removeEventListener('mousemove', divMove, true);
}

function mouseDown(e) {
  window.addEventListener('mousemove', divMove, true);
}

function divMove(e) {
    var max = 443;
    var x = event.clientX;

    if (x > 100 && x < max) {
        var div = document.getElementById('dragger');
        div.style.position = 'absolute';

        div.x = xPosition;

        div.style.left = e.clientX + 'px';
    }

    //console.log(x);
}

【问题讨论】：

标签： javascript draggable drag

【解决方案1】：

您可以通过知道可拖动元素的宽度并将偏移量调整为 -(width/2); 来做到这一点；

function divMove(e) {
    var max = 443;
    var x = event.clientX;
    var div = document.getElementById('dragger');
    var offset = div.offsetWidth/2;

    if (x > (100 + offset) && x < (max+offset)) {

        div.style.position = 'absolute';

        div.x = xPosition;

        div.style.left = (e.clientX - offset) + 'px';
    }

    //console.log(x);
}

这是更新后的fiddle

【讨论】：