Drag & Drop (arrastrar y soltar) simple en un DIV con JavaScript sin librerí­as

el
Hoy voy a dejarles un código bastante sencillo y didáctico para hacer que un DIV pueda ser arrastrado por toda el área de nuestra página y colocado donde el usuario desee. Como es costumbre el código no usará ninguna librería pesada; y no es que esté en contra del uso de librerías o frameworks, sino es que me parece sumamente importante ENTENDER que pasa por debajo de esas bonitas llamadas a clases/funciones y ser capaces de modificar el código para nuestro beneficio.

Lo que voy a explicar es el tipo de Drag & Drop más sencillo que hay en el cual solo se trata de "arrastrar y soltar" y no en el que las capas se reordenan automáticamente (este lo dejamos para el siguiente POST). En otras palabras lo que vamos a conseguir es algo como esto: http://www.formatoweb.com.ar/blog/files/dragdrop.php y el auto-ordenable que dejamos para más adelante sería este: http://www.formatoweb.com.ar/blog/files/dragdrop2.php (observen que pasa al arrastrar una capa por encima de la otra).


A continuación les dejo el código y pasamos a la explicación de cada función por separado:



PLAIN TEXT
JavaScript:

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


  2. <html>

  3. <head>

  4. <script type="text/javascript">

  5. function carga()


  6. {

  7.     posicion=0;

  8.    


  9.     // IE

  10.     if(navigator.userAgent.indexOf("MSIE")>=0) navegador=0;


  11.     // Otros

  12.     else navegador=1;

  13. }


  15. function evitaEventos(event)


  16. {

  17.     // Funcion que evita que se ejecuten eventos adicionales

  18.     if(navegador==0)


  19.     {

  20.         window.event.cancelBubble=true;


  21.         window.event.returnValue=false;

  22.     }


  23.     if(navegador==1) event.preventDefault();

  24. }


  26. function comienzoMovimiento(event, id)


  27. {

  28.     elMovimiento=document.getElementById(id);

  29.    


  30.      // Obtengo la posicion del cursor

  31.     if(navegador==0)

  32.      {

  33.         cursorComienzoX=window.event.clientX+document.documentElement.scrollLeft+document.body.scrollLeft;


  34.         cursorComienzoY=window.event.clientY+document.documentElement.scrollTop+document.body.scrollTop;



  36.         document.attachEvent("onmousemove", enMovimiento);


  37.         document.attachEvent("onmouseup", finMovimiento);

  38.     }


  39.     if(navegador==1)

  40.     {   


  41.         cursorComienzoX=event.clientX+window.scrollX;

  42.         cursorComienzoY=event.clientY+window.scrollY;


  43.        

  44.         document.addEventListener("mousemove", enMovimiento, true);


  45.         document.addEventListener("mouseup", finMovimiento, true);


  46.     }

  47.    

  48.     elComienzoX=parseInt(elMovimiento.style.left);


  49.     elComienzoY=parseInt(elMovimiento.style.top);

  50.     // Actualizo el posicion del elemento


  51.     elMovimiento.style.zIndex=++posicion;

  52.    


  53.     evitaEventos(event);

  54. }



  56. function enMovimiento(event)

  57. { 

  58.     var xActual, yActual;


  59.     if(navegador==0)

  60.     {   


  61.         xActual=window.event.clientX+document.documentElement.scrollLeft+document.body.scrollLeft;


  62.         yActual=window.event.clientY+document.documentElement.scrollTop+document.body.scrollTop;


  63.     } 

  64.     if(navegador==1)


  65.     {

  66.         xActual=event.clientX+window.scrollX;


  67.         yActual=event.clientY+window.scrollY;

  68.     }


  69.    

  70.     elMovimiento.style.left=(elComienzoX+xActual-cursorComienzoX)+"px";


  71.     elMovimiento.style.top=(elComienzoY+yActual-cursorComienzoY)+"px";


  73.     evitaEventos(event);

  74. }


  76. function finMovimiento(event)

  77. {


  78.     if(navegador==0)

  79.     {   

  80.         document.detachEvent("onmousemove", enMovimiento);

  81.         document.detachEvent("onmouseup", finMovimiento);


  82.     }

  83.     if(navegador==1)

  84.     {

  85.         document.removeEventListener("mousemove", enMovimiento, true);


  86.         document.removeEventListener("mouseup", finMovimiento, true);


  87.     }

  88. }


  90. window.onload=carga;


  91. </script>

  92. </head>

  93. <body>



  95. <div id="div1" style="top:100px; left:100px; position:absolute; background-color:#FF0000; color:#000000;"

  96. onmousedown="comienzoMovimiento(event, this.id);" onmouseover="this.style.cursor='move'">

  97. <span style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px;">


  98. Prueba.................<br>

  99. Prueba.................<br>

  100. Prueba.................<br>


  101. Prueba.................<br>

  102. Prueba.................<br>

  103. </span>

  104. </div>


  106. <div id="div2" style="top:200px; left:300px; position:absolute; background-color:#FFFF00; color:#000000;"

  107. onmousedown="comienzoMovimiento(event, this.id);" onmouseover="this.style.cursor='move'">


  108. <span style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px;">

  109. Prueba.................<br>

  110. Prueba.................<br>


  111. Prueba.................<br>

  112. Prueba.................<br>

  113. Prueba.................<br>

  114. </span>


  115. </div>


  117. </body>

  118. </html>



EDITADO: les dejo una versión del código que utiliza JavaScript no intrusivo para asignar los scrolls y que además utiliza el modelo de registro de eventos tradicional para simplificar bastante el código, aunque quizá no sea tan didáctico: descargar ejemplo.
Como ven, el script se compone únicamente de 5 funciones las cuales paso a explicar a continuación:
  • carga(): se ejecuta al cargar la página (onload) y se encarga de detectar el navegador del usuario para el posterior correcto manejo del objeto event. La variable navegador quedará en 0 si el usuario tiene IE o en 1 para cualquier otro. También aquí se setea la variable posicion en 0; esta variable se incrementa cada vez que se hace click en uno de los divs y se utiliza para el seguimiento del atributo z-index de los mismos. Esta variable es la responsable de que el div que se esté arrastrando en ese momento sea siempre el que se muestre por encima de los demás.
  • evitaEventos(): simplemente evita que otros eventos adicionales sean ejecutados en la propagación (más info en inglés aquí http://www.quirksmode.org/js/events_order.html)
  • comienzaMovimiento(): esta función es llamada al momento que el usuario clickea una de las capas que pueden ser arrastradas. Esta función se encargará de obtener en las variables cursorComienzoX y cursorComienzoY (hay una forma distinta de obtenerlas según el navegador) que representan la posición del cursor al momento del click; también obtendrá en las variables elComienzoX y elComienzoY que representan la posición del elemento con respecto al borde superior e izquierdo de la página, osea el top y left de CSS. Por último "le dirá" al objeto document que cada vez que el usuario mueva el mouse un pixel, la función enMovimiento debe ser llamada (para poder recalcular la posición de la capa) y que cuando el usuario suelte el mouse la función finMovimiento deberá ejecutarse. Esto se hace añadiendo manejadores de eventos al objeto document para que cuando una acción X sea realizada por el usuario (en este caso mover el mouse con la tecla presionada) se llame a una función Y (en este caso enMovimiento). Más información sobre eventos aquí: http://www.quirksmode.org/js/events_tradmod.html. Esta función también colocará la capa por encima de todas al modificarle su z-index valiendose de la variable posicion declarada en carga().
  • enMovimiento(): función llamada cuando el usuario mueve el mouse manteniendo el botón presionado sobre una capa perteneciente al Drag. La funcionalidad de este trozo de código es obtener en xActual e yActual la posición actual del puntero del mouse y, como ya teniamos guardada la posición del mouse al comenzar el movimiento y la posición de la capa con respecto a los márgenes, simplemente obtenemos el trayecto en pixeles que ha recorrido el mouse restando la posición actual con la posición inicial (xActual-cursorComienzoX) y a esto le sumamos la posición de la capa respecto de los márgenes (elComienzoX). Este resultado, que suena enredado pero es sencillo de comprender leyendo con detenimeinto, es donde debemos colocar finalmente la capa, modificandole sus atributos left y top con esta sentencia: elMovimiento.style.top=(elComienzoY+yActual-cursorComienzoY)+"px"; Recordemos que esta función se llama cada vez que el usuario mueve el mouse habiendo hecho click sobre la capa; y se seguirá ejecutando hasta que el botón izquierdo sea soltado.
  • finMovimiento(): función ejecutada cuando el usuario suelta el botón izuqierdo después de haber realizado el movimiento de la capa. Su funcionalidad será únicamente "avisarle" al objeto document que ya no debe llamar a la función enMovimiento cuando el usuario mueva el mouse; esto, al igual que en las funciones anteriores se realiza diferencialmente dependiendo que navegador posea el usuario... temita de incompatibilidades, los colegas del rubro sabrán entender...
Bueno, eso es todo. Como habrán notado en el código utilizo lo que los que saben llaman "modelo de registro de eventos avanzado" (el addEventListener y sus secuaces) aunque se podría haber utilizado el modelo tradicional (elemento.onmousemove=funcion; por ejemplo) y quizá simplificar un poco las cosas... pero bueno, cuestión de gustos.
Espero resulte útil. Para más adelante queda pendiente la explicación para Drag & Drop auto-ordenable de los 2 tipos que existen. Cualquier consulta comenten nomás!

Comentarios

Publicar un comentario