Question

我为发布这么多问题而道歉 - 我还在学习！所以，我可以拖放html中的第一个元素没问题;但是，当我尝试拖放第二个时，鼠标下方显示相当多。它仍然拖动我移动鼠标的地方，但远远低于。怎么了？

这是javascript：

// JavaScript Document

var posX;
var posY;
var element;

document.addEventListener("mousedown", drag, false);

function drag(event) {
    if(event.target.className == "square") {
        element = event.target;
        posX = event.clientX -parseInt(element.offsetLeft);
        posY = event.clientY -parseInt(element.offsetTop);
        document.addEventListener("mousemove", move, false);
    }
}

function move(event) {

    if (typeof(element.mouseup) == "undefined")
        document.addEventListener("mouseup", drop, false);
    //Prevents redundantly adding the same event handler repeatedly

    element.style.left = event.clientX - posX + "px";
    element.style.top = event.clientY - posY + "px";
}    

function drop() {
    document.removeEventListener("mousemove", move, false);
    document.removeEventListener("mouseup", drop, false);
    //alert("DEBUG_DROP");
}

这是html：

<body>

<p class="square">Thing One</p>
<p class="square">Thing Two</p>

</body>

这是css：

/* CSS Document */

.square {
    position: relative;
    width: 100px;
    height: 100px;
    background: red;
}

p {
    padding: 0px;
    margin: 0px;
}

谢谢大家的时间！我非常感谢！

Answer 1

这里有两个不同的问题需要考虑：

如何获取页面上元素的位置？
当我为left和top样式属性分配新值时会发生什么？

第一个问题的答案取决于对element.offsetLeft和element.offsetTop的理解。这些属性提供相对于element.offsetParent的偏移量，defined as“最接近（在包含层次结构中最近）包含元素”。

在您的文档中，这是<body>元素，因此它可以按预期工作。如果您将方块放在其他元素中，您会发现代码将停止工作。你需要的是一个函数来走向包含元素的树并对每个偏移求和，like this：

function findPos(obj) {
    var curleft = curtop = 0;
    if (obj.offsetParent) {
        do {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);
        return { x: curleft, y: curtop };
    }
}

像这样使用：

var pos= findPos(element);
posX = event.clientX - pos.x;
posY = event.clientY - pos.y;

回答第二个问题需要了解相对定位的元素。定位的元素相对位于 relative 的位置，通常出现在页面上。将值分配给top和left时，您不会给出绝对值。您给出的位置被视为相对于元素在布局中的原始位置。这是相对定位的特征，而不是错误。您可能希望改为使用position: absolute;。

Answer 2

如果你在某处使用相对定位，那么元素的偏移量可能不是相对于文档的左上角。

你需要找到元素的绝对偏移量。

在JavaScript中实现对相对定位元素的拖放

2 个答案: