Desarrollo UI atractivo: Drag and Drop nativo en HTML5

10-08-2016
 
Arrastrar y soltar

Arrastrar y soltar

Si queremos hacer UIs(User Interfaces) ricas y que hagan disfrutar a nuestros usuarios debemos dominar el ‘Drag&Drop'(O el arrastrar y soltar).

HTML5 nos aporta un mecanismo para implementar el ‘Drag&Drop’ nativo mediante un sistema de eventos. Para ello deberemos definir que elementos queremos que sean arrastrables y en que sitios se podrán soltar.

Definiendo los elementos arrastrables

Un elemento será ‘arrastrable’ cuando tenga la propiedad ‘draggable’ a ‘true’. Después podremos interceptar los eventos ‘ondragstart’ y ‘ondragend’:

<h3>Elementos</h3>

<img id='img1' src='img1.png' draggable='true' ondragstart='startDrag(event)' ondragend='stopDrag(event)' />
<img id='img2' src='img2.png' draggable='true' ondragstart='startDrag(event)' ondragend='stopDrag(event)' />

En el evento ‘onstartdrag’ es donde podremos configurar la información que arrastramos, en este caso pondremos el ‘id’ del elemento:


function startDrag(event) {
	event.dataTransfer.setData( "id", ev.target.id );
	}

function stopDrag(event) {
	}

Definiendo las zonas donde soltar

Ahora definiremos la zona donde se podrán soltar los elementos. En la zona donde se puedan soltar los elementos solamente le definiremos los eventos: ‘ondragenter’, ‘ondragover’, ‘ondragleave’ y ‘ondrop’.

<h3>Soltar</h3>

<div 
	style='margin: 15px; padding: 15px; background-color: #ccc; border: 1px #999 dotted;'
	ondrop='dropDrag(event)'
	ondragover='dragoverDrag(event)'
	>
</div>

function dropDrag(event) {
	alert( "Soltado elemento #"+event.dataTransfer.getData( "id" ));

	event.preventDefault();
	}

function dragoverDrag(event) {
	/* preventDefault() para permitir soltar */
	event.preventDefault();
	}

Es muy importante el uso de la función ‘event.preventDefault()’ que hace que el navegador no realice su trabajo habitual(Por ejemplo abrir una imagen). Si no la utilizamos no funcionará correctamente.

Bonus track: Arrastrar ficheros desde el escritorio

Si queremos poder arrastrar ficheros desde el escritorio al navegador(Al estilo de Dropbox, por ejemplo), tendremos que hacerlo de la misma manera, pero utilizando ‘e.dataTransfer.files’:


function dropDrag(event) {
	var files = event.dataTransfer.files;
	for (var i = 0, f; f = files[i]; i++) {
		alert( files[i].name+"("+files[i].size+" bytes)" );
  		}

	event.preventDefault();
	}

En fin, espero que os haya gustado tanto como a mi.

Leave a Reply

© Albert Coronado Calzada