javascript - document.title jquery

JavaScript Cómo mover dinámicamente la Div haciendo clic y arrastrando

Question

Bueno, parece que debería ser simple. Necesito tomar un div ya existente y moverlo de acuerdo con la posición del mouse dentro de la ventana. He buscado en todas partes y me ha llevado a formas demasiado complicadas de hacer lo mismo e implica el uso de j-query. Necesito usar estrictamente javascript para lo que estoy tratando de hacer.

Método:

var mousePosition;
var div;

(function createDiv(){

    div = document.createElement("div");
    div.style.position = "absolute";
    div.style.left = "0px";
    div.style.top = "0px";
    div.style.width = "100px";
    div.style.height = "100px";
    div.style.background = "red";
    div.style.color = "blue";

    div.addEventListener(''mousedown'', handleKeyPressed, true);

    document.body.appendChild(div);


})();

function handleKeyPressed(event) {

    event.preventDefault();

    mousePosition = {

        x : event.clientX,
        y : event.clientY

    };

    div.style.left = mousePosition.x;
    div.style.top = mousePosition.y;

    //alert("whoa!");

}

Answer 1

Acabo de hacer un pequeño cambio en la respuesta de @adeneo que funciona muy bien. Si todo está incluido en una función, y cada evento está adjunto a la división, puede usarlo como parte de una biblioteca.

Llame a la siguiente función pasando un id. Si el div no existe se crea.

function drag_div(div_id){
var div;

div = document.getElementById(div_id);

if(div == null){
   div = document.createElement("div");
   div.id = div_id;
   div.style.position = "absolute";
   div.style.left = "0px";
   div.style.top = "0px";
   div.style.width = "100px";
   div.style.height = "100px";
   div.style.background = "red";
   div.style.color = "blue";
   document.body.appendChild(div);
}

div.addEventListener(''mousedown'', function(e) {
    div.isDown = true;
    div.offset = [
        div.offsetLeft - e.clientX,
        div.offsetTop - e.clientY
    ];
}, true);

div.addEventListener(''mouseup'', function() {
    div.isDown = false;
}, true);

div.addEventListener(''mousemove'', function(event) {
    event.preventDefault();
    if (div.isDown) {
        div.mousePosition = {

            x : event.clientX,
            y : event.clientY

        };
        div.style.left = (div.mousePosition.x + div.offset[0]) + ''px'';
        div.style.top  = (div.mousePosition.y + div.offset[1]) + ''px'';
    }
}, true);
}

Answer 2

Compruebe si es más suave que el adeneo: FIDDLE

var m = document.getElementById(''move'');
m.addEventListener(''mousedown'', mouseDown, false);
window.addEventListener(''mouseup'', mouseUp, false);

function mouseUp() {
    window.removeEventListener(''mousemove'', move, true);
}

function mouseDown(e) {
    window.addEventListener(''mousemove'', move, true);
}

function move(e) {
    m.style.top = e.clientY + ''px'';
    m.style.left = e.clientX + ''px'';
};

Answer 3

Creo que estás buscando algo más como esto.

var mousePosition;
var offset = [0,0];
var div;
var isDown = false;

div = document.createElement("div");
div.style.position = "absolute";
div.style.left = "0px";
div.style.top = "0px";
div.style.width = "100px";
div.style.height = "100px";
div.style.background = "red";
div.style.color = "blue";

document.body.appendChild(div);

div.addEventListener(''mousedown'', function(e) {
    isDown = true;
    offset = [
        div.offsetLeft - e.clientX,
        div.offsetTop - e.clientY
    ];
}, true);

document.addEventListener(''mouseup'', function() {
    isDown = false;
}, true);

document.addEventListener(''mousemove'', function(event) {
    event.preventDefault();
    if (isDown) {
        mousePosition = {

            x : event.clientX,
            y : event.clientY

        };
        div.style.left = (mousePosition.x + offset[0]) + ''px'';
        div.style.top  = (mousePosition.y + offset[1]) + ''px'';
    }
}, true);

FIDDLE

Answer 4

jquery es mucho más fácil de implementar. Me sorprende que digas que no quieres aprenderlo.

Puede guardar el archivo jquery en su computadora local para que no necesite internet para usar las funciones de jquery.

En mi caso lo he guardado en la carpeta de herramientas. Así que no necesito estar en internet.

Para todas las js muchas líneas de código js respondidas anteriormente, solo necesita una línea pequeña.

 <script src="/common/tools/jquery-1.10.2.js"></script>
 <script src="/common/tools/jquery-ui.js"></script>

 <script>
   $(function() {
   $( "#mydiv_to_make_draggable" ).draggable();
   });
</script>