任何人都可以帮助我改进这个可拖动的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>
答案 0 :(得分: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
相应地。)
答案 1 :(得分: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;
}