Улучшите мой Draggable DIV

Question

Может кто-нибудь может помочь мне улучшить этот отвратительный 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>

Answer 1

Проблема в том, как вы рассчитываете новую позицию вашего <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 соответственно.)

Answer 2

Вам нужно вычесть текущую позицию 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