1

谁能帮我改进这个可拖动的 DIV？在第一次拖放中，一切运行完美。但是当我第二次尝试拖动时，位置错误。

CSS

#coordenadas {
    position: fixed;
    bottom: 0px;
    right: 0px;
    background: rgb(224, 224, 224);
}
#clicado {
    position: fixed;
    bottom: 20px;
    right: 0px;
    background: rgb(224, 224, 224);
}
#janela {
    position: absolute;
    height: 100px;
    width: 100px;
    background: rgb(224, 224, 224);
}

JavaScript

var clicado = false;
var inicioX;
var inicioY;
var finalX;
var finalY;

document.onmousemove = function mostrarInfo(event) {
    if (clicado == true) {
        finalX = event.clientX;
        finalY = event.clientY;
        pontoX = finalX - inicioX;
        pontoY = finalY - inicioY;
        document.getElementById('janela').style.top = pontoY + "px";
        document.getElementById('janela').style.left = pontoX + "px";
        document.getElementById('coordenadas').innerHTML = "X: " + pontoX + " | ";
        document.getElementById('coordenadas').innerHTML += "Y: " + pontoY;
    }
}

function segurar(event) {
    clicado = true;
    document.getElementById('clicado').innerHTML = "Mouse: Segurando";
    inicioX = event.clientX;
    inicioY = event.clientY;
}

function soltar() {
    clicado = false;
    document.getElementById('clicado').innerHTML = "Mouse: Solto";
}

HTML

<div id="janela" onmousedown="segurar(event);" onmouseup="soltar();"></div>
<span id="coordenadas"></span>
<span id="clicado"></span>
4

2 回答 2

0

问题是您如何计算<div>. 在您的代码中，您正在获取鼠标位置并减去初始位置。这是第一次可以，因为您的初始位置是top: 0; left: 0。但是一旦你第二次开始移动它，它就会变得更加明显。您将位置设置为开始位置和结束位置之间的距离。

像这样改变你mostrarInfo：

document.onmousemove = function mostrarInfo(event) {
    if (clicado == true) {
        pontoX = event.clientX;
        pontoY = event.clientY;
        document.getElementById('janela').style.top = pontoY + "px";
        document.getElementById('janela').style.left = pontoX + "px";
        document.getElementById('coordenadas').innerHTML = "X: " + pontoX + " | ";
        document.getElementById('coordenadas').innerHTML += "Y: " + pontoY;
    }
}

请参阅此JSFiddle。

它仍然不完美，因为它试图将左上角设置<div>为您的鼠标位置，但它仍然比您的另一个更好。为了更准确，我建议改用 JQuery 之类的东西。（否则您需要确定<div>点击发生的位置，找到该点与左上角之间的距离，并相应地调整您的pontoX和pontoY。）

于 2012-08-27T20:02:47.013 回答
0

您需要将 div 的当前位置减去偏移量，因为 mousedown 事件会为您提供全局坐标。

function segurar(event) {
    clicado = true;
    document.getElementById('clicado').innerHTML = "Mouse: Segurando";
    inicioX = event.clientX - document.getElementById('janela').offsetLeft;
    inicioY = event.clientY - document.getElementById('janela').offsetTop;
}

这是我的jsfiddle

于 2012-08-27T20:22:41.353 回答