Arrastrar y Soltar del HTML5

El arrastrar y soltar es una característica muy común. Esto es cuando agarras y lo arrastras a otra posición diferente.

En HTML5 el arrastrar y soltar es parte del estándar: cualquier elemento puede ser arrastrado.

En el siguiente ejemplo se muestra un ejemplo simple de arrastra y soltar:

<!doctype html>
  <html>
    <head>
      <script>
      function allowDrop(ev) {
        ev.preventDefault();
      }
      function drag(ev) {
        ev.dataTransfer.setData("text", ev.target.id);
      }
      function drop(ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("text");
        ev.target.appendChild(document.getElementById(data));
      }
      </script>
    </head>
  <body>
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
    </div>
    <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" 
      width="336" height="69">
  </body>
</html>

Esto puede parecer complicado, pero vamos a explicar las diferentes partes de los eventos para arrastrar y soltar:

Hacer un elemento arrastrable

Antes que nada, para hacer un elemento arrastrable se debe establecer el atributo draggable en true:

<img draggable="true">

¿Qué arrastrar? con ondragstart y setData()

Para que un elemento sea arrastrable se debe especificar que sucede cuando el elemento es arrastrado:

El atributo ondragstart llama a la función drag(event), que especifica que datos se arrastran.
El método dataTransfer.setData() especifica el tipo de datos y el valor del dato arrastrado.

function drag(ev){
  ev.dataTransfer.setData("text", ev.target.id);
}

En este caso, el tipo de datos es "text" y el valor es el id del elemento arrastrado ("drag1").

¿Dónde soltar? con ondragover

El atributo ondragover especifica a este elemento que ahí puede ser soltado el dato/elemento arrastrado. Por defecto, dato/elemento no puede ser soltado en otros elementos. Para permitir el soltar, debemos evitar el manejo por defecto del elemento, y esto se hace llamando el método event.preventDefault() para el evento ondragerover:

event.preventDefault()

Soltar con ondrop

Cuando el dato/elemento arrastrado es soltado, un evento ocurre. el atributo ondrop llama a la función drop(event):

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}

Explicación del código:

se llama a preventDefault() es para evitar el manejo por defecto de los datos por parte del navegador (por defecto es abierto como enlace al soltar).
se obtiene los datos arrastrados con el método dataTransfer.getData(). Este método devolverá todos los datos que se configurarón para el mismo tipo en el método setData().
Los datos arrastrados son el id de el elemento arrastrado ("drag1").
Agregar el elemento arrastrado dentro del elemento de soltado.