Revista Comunicación

¿Los artículos de tu blog publicados aquí? ¡Propón tu blog!


Efecto drag & drop (arrastrar y soltar) con javascript

Publicado el 11 diciembre 2013 por Marcostrfn @bajolinux

Realizar un efecto drag & drop (arastrar y soltar) en tu web es muy sencillo.

Basta con indicar cuales son los objetos que serán arastrados y cuales serán los objetos donde pueden encajar, y luego, un poco de javascript.

Veamos un ejemplo:

  1. <!DOCTYPE HTML>
  2. <html>
  3.  <head>
  4.  <style type="text/css">
  5.   #caja {
  6.    text-decoration: none;
  7.    color: #000;
  8.    margin: 10px;
  9.    width: 150px;
  10.    min-height: 150px;
  11.    border: 3px dashed #999;
  12.    background: #eee;
  13.    padding: 10px;
  14.    display: block;
  15.   }
  16.   #objetos {
  17.    text-decoration: none;
  18.    color: #000;
  19.    margin: 10px;
  20.    width: 150px;
  21.    min-height: 150px;
  22.    border: 3px dashed #999;
  23.    background: #eee;
  24.    padding: 10px;
  25.    display: block;
  26.   }
  27.   .derecha {float:right}
  28.   .izquierda {float:left}
  29.  </style>
  30.  <script> 
  31.  function leaveDrop(ev) {
  32.    ev.preventDefault();
  33.    ev.target.style.backgroundColor="#cccccc"; 
  34.  }
  35.  function allowDrop(ev) {
  36.    ev.preventDefault();
  37.    ev.target.style.backgroundColor="#eeeeee"; 
  38.  }
  39.  function drag(ev) {   
  40.    var nodo = ev.target.id; 
  41.    ev.dataTransfer.setData("nodo",nodo);
  42.  }
  43.  function drop(ev) {
  44.    ev.preventDefault();
  45.    var idNodo=ev.dataTransfer.getData("nodo");
  46.    nuevoNodo=document.getElementById(idNodo).cloneNode(true); 
  47.    ev.target.appendChild(nuevoNodo);
  48.    ev.target.style.backgroundColor="#cccccc"; 
  49.  }
  50.  </script>
  51.  </head>
  52. <body>
  53.  <div id="main">
  54.   <div id="caja" class="izquierda" 
  55.    ondrop="drop(event)" 
  56.    ondragleave="leaveDrop(event)" 
  57.    ondragover="allowDrop(event)">
  58.   </div> 
  59.   <div id="objetos" class="izquierda" >
  60.    <div id="elem1" draggable="true" 
  61.    ondragstart="drag(event)">
  62.   Elemento 1
  63.    </div>
  64.    <div id="elem2" draggable="true" 
  65.    ondragstart="drag(event)">
  66.   Elemento 2
  67.    </div>
  68.    <div id="elem3" draggable="true" 
  69.    ondragstart="drag(event)">
  70.   Elemento 3
  71.    </div>
  72.   </div>
  73.  </div>
  74. </body>
  75. </html>

Dentro del objeto div#objetos hemos creado tres elementos que serán los que se podrán mover, marcados como elem1, elem2 y elem3. Cada uno de ellos con atributos draggable y ondragstart. Este último llama a la función drag().

El objeto div#caja será el encargado de recibir los objetos, y está marcado con los atributos ondrop, ondragleave y ondragover. Llamará a las funciones drop(), leaveDrop() y allowDrop() respectivamente.

Veamos ahora que trabajo realiza cada una de estas funciones:

  • Función drag(): Prepara para la transferencia el atributo id del objeto que vamos a arrastrar. Para ello se sirve de ev.dataTransfer.setData().
  • Función drop(): Recibe el atributo del objeto con ev.dataTransfer.getData, lo clona y lo anexa al objeto dropable, en nuestro caso el div#caja.
  • Función allowDrop(): Se ejecuta cuando un objeto que estamos arrastrando entra en div#caja.
  • Función leaveDrop(): Al contrario que la anterior, se ejecuta cuando salimos del div#caja. En el ejemplo usamos estas funciones para cambiar el color de fondo del objeto.

Bastante sencillo, ¿no crees?

Efecto drag & drop (arrastrar y soltar) con javascript publicado en BajoLinux.


Volver a la Portada de Logo Paperblog
Denunciar

Sobre el autor


Marcostrfn ver su perfil
ver su blog

El autor no ha compartido todavía su cuenta

Sus últimos artículos

Ver todos

Revistas