Drag y Drop
DRAG AND DROP
Durante años, hemos utilizado bibliotecas como jQuery y Dojo para conseguir funcionalidades complejas en las interfaces de usuario como las animaciones, las esquinas redondeadas y la función de arrastrar y soltar. Esta última funcionalidad (Drag and Drop, DnD) tiene una gran importancia en HTML5, y de hecho se ha integrado en el API. En la especificación, este API se define como un mecanismo basado en eventos, donde identificamos los elementos que deseamos arrastrar con el atributo draggable y desde JavaScript escuchamos los eventos que se producen, para proporcionar la funcionalidad deseada Drag y Drop.
Por defecto, todos los enlaces, imágenes y nodos de texto (o selecciones de texto) de un documento HTML son arrastables, pero no hay ningún evento asociado a estas acciones, por lo que poco más podemos hacer, a excepción de la funcionalidad que nos ofrezca el navegador o el propio sistema operativo (guardar las imágenes en el escritorio, crear ficheros de texto, etc) Drag y Drop.
DETECCIÓN DE LA FUNCIONALIDAD
Aunque la compatibilidad actual de los navegadores con esta API es bastante amplia, hay que tener en cuenta que los dispositivos móviles no soportan esta funcionalidad. Si nuestro sitio web está siendo accedido desde un dispositivo móvil, y tenemos implementada esta funcionalidad (por ejemplo en una cesta de la compra), debemos proveer otra solución para que nuestro sitio web se comporte de manera correcta, y no perjudicar la experiencia del usuario.
La manera mas sencilla de comprobar la disponibilidad de este API, es utilizar la biblioteca Modernizr, la cual nos indica si el navegador soporta esta funcionalidad:
if (Modernizr.draganddrop)
{ // Browser supports HTML5 DnD.
}
else
{ // Fallback to a library solution or disable DnD.
}
CREACIÓN DE CONTENIDO ARRASTRABLE
Hacer que un elemento se pueda arrastrar es muy sencillo. Solo hay que establecer el atributo draggable=”true” en el elemento que se quiere mover. La función de arrastre se puede habilitar prácticamente en cualquier elemento, incluidos archivos, imágenes,
enlaces, listas u otros nodos DOM.
<div id=”columns”>
<div class=”column” draggable=”true”>
<header>A</header>
</div>
<div class=”column” draggable=”true”>
<header>B</header>
</div>
<div class=”column” draggable=”true”>
<header>C</header>
</div>
</div>
Una ayuda visual al usuario, para indicar que un elemento es arrastable, es transformar el aspecto tanto del elemento como del cursor. Con CSS esto es muy sencillo:
[draggable] { user-select: none; }
.column:hover { border: 2px dotted #666666; background-color: #ccc; border-radius: 10px; box-shadow: inset 0 0 3px #000; cursor: move;Drag y Drop
}
La especificación define hasta siete eventos que son lanzados tanto por los elementos de origen (los que son arrastrados) com para los elementos de destino (donde soltamos el elemento arrastrado) Drag y Drop.
Drag y Drop