1

このドラッグ可能な DIV の改善を手伝ってくれる人はいますか? 最初のドラッグ アンド ドロップでは、すべてが完璧に実行されます。しかし、2回目にドラッグしようとすると、位置がバグります。

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

mousedown イベントはグローバル座標を提供するため、div の現在の位置をオフセットに差し引く必要があります。

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 に答える
0

問題は、 の新しい位置をどのように計算するかです<div>。コードでは、マウスの位置を取得して初期位置を減算しています。あなたの最初の位置は であるため、これは初めてでも問題ありませんtop: 0; left: 0。しかし、2 回目に動かし始めると、より明白になります。開始位置と終了位置の間の距離に位置を設定しています。

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>、クリックが発生している場所を把握し、そのポイントと左上隅の間の距離を見つけ、それに応じて and を調整するpontoX必要がありますpontoY。)

于 2012-08-27T20:02:47.013 に答える