Mover capas y otros elementos HTML con JavaScript utilizando el ratón

En este artículo vamos a ver cómo podemos mover objetos (capas, imágenes, etc) de una página web con el ratón utilizándo JavaScript y los eventos de ratón onmousedown, onmouseup y onmousemove del objeto document.

Crearemos un ejemplo que consistirá en una sencilla página de prueba donde podremos mover una capa div pinchando con el ratón y arrastrando sin soltar el botón hasta la hayamos colocado en el lugar deseado.

De momento no vamos a preocuparnos de si la página tiene scroll o no (supondremos que no lo tiene), para no complicar el ejemplo aunque os adelanto que sí es conveniente tenerlo en cuenta al mover elementos para no obtener «efectos raros».

Empezaremos definiendo el documento HTML de forma habitual. Entre las etiquetas head definiremos el estilo objMovible, que será el que deberemos aplicar a todos los elementos de nuestra página que vayamos a querer que se muevan con el ratón.

<style type="text/css">
  .objMovible { position:absolute; cursor:pointer }
</style>

El estilo indica principalmente que se utilizará posicionamiento absoluto y que se utilizará el tipo de cursor pointer (el de la mano señalando) cuando pasemos el ratón por encima. Si utilizamos varios objetos que se mueven en la misma página probablemente tendremos que jugar con la propiedad z-index para especificar cuáles están delante y cuáles detrás.

A continuación definiremos el código JavaScript. Básicamente crearemos tres funciones que manejarán los eventos de ratón del objeto document citados anteriormente. En primer lugar definiremos una serie de variables y flags que utilizaremos después:

//Si el navegador del cliente es Mozilla la variable siguiente valdrá true
var moz = document.getElementById && !document.all;
//Flag que indica si estamos o no en proceso de arrastrar el ratón
var estoyArrastrando = false;
//Variable para almacenar un puntero al objeto que estamos moviendo
var dobj;

Ahora vamos a empezar a definir las funciones. La primera función manejará el evento onmousedown, es decir, será llamada cuando presionemos un botón del ratón sobre cualquier elemento de la página.

function presionarBoton(e) {
  //Obtenemos el elemento sobre el que se ha presionado el botón del ratón
  var fobj = moz ? e.target : event.srcElement;

  // Buscamos el primer elemento en la que esté contenido aquel sobre el que se ha pulsado
  // que pertenezca a la clase objMovible. Esto es necesario por si hemos pinchando sobre
  // un elemento contenido dentro de otro pero este último es el que pertenece a la clase
  // objmovible
  while (fobj.tagName.toLowerCase() != "html" && fobj.className != "objMovible") {
    fobj = moz ? fobj.parentNode : fobj.parentElement;
  }

  // Si hemos obtenido un objeto movible...			
  if (fobj.className == "objMovible") {
    // Activamos el flag para indicar que se empieza a arrastrar
    estoyArrastrando = true;
    // Guardamos un puntero al objeto que se está moviendo en la variable global
    dobj = fobj;
    // Devolvemos false para no realizar ninguna acción posterior
    return false;
  }
}
//Asociamos la función al evento onmousedown
document.onmousedown = presionarBoton;

La siguiente función será el manejador del evento onmousemove, que se produce siempre que se mueve el ratón sobre nuestra página. Para ver si estamos arrastrando el ratón, es decir, si estamos pulsando un botón del ratón a la vez que lo movemos, nos fijaremos en el flag estoyArrastrando que habíamos definido anteriormente.

function arrastrarRaton(e){
  if (estoyArrastrando) {
    // Obtenemos las coordenadas X e Y del ratón (de forma diferente dependiendo del navegador del cliente)
    newLeft = moz ? e.clientX : event.clientX;
    newTop = moz ? e.clientY : event.clientY;

    // Posicionamos el objeto en las nuevas coordenadas y aplicamos unas desviaciones
    // horizontal y vertical correspondientes a la mitad del ancho y alto del elemento
    // que movemos para colocar el puntero en el centro de la capa movible.
    dobj.style.left = newLeft - parseInt(dobj.style.width)/2;
    dobj.style.top = newTop - parseInt(dobj.style.height)/2;

    // Devolvemos false para no realizar ninguna acción posterior
    return false;
  }
}
//Asociamos la función al evento onmousemove
document.onmousemove = arrastrarRaton;

Finalmente definimos la función que manejará el evento onmouseup, que simplemente desactiva el flag que indica que estamos arrastrando el ratón.

function soltarBoton(e) {	
  estoyArrastrando = false;
}
//Asociamos la función al evento onmouseup
document.onmouseup = soltarBoton;

Sólo nos queda añadir una capa de la clase objMovible al body de nuestra página y observar el funcionamiento de nuestro script. En el ejemplo yo he añadido una de la siguiente forma:

<div class="objMovible" style="width:20px;height:20px;background-color:#CC0000"></div>

Aquí tenéis un enlace donde podéis ver el ejemplo completo y comprobar el funcionamiento del script que acabamos de crear..