Cargando



HTML5 - Drag & Drop, parte 1

En este tutorial vamos a explicar como crear una zona drag & drop en una página con HTML5, en esta primera parte nos concentraremos en crear el efecto de arrastre.


mar 09 2014 07:44
Profesional
El efecto drag & drop consiste en tomar un elemento de la página con un gesto del mouse, normalmente haciendo click sobre él y arrastrar dicho elemento hasta una zona donde puede ser depositado, luego según la funcionalidad de nuestra página ocurrirá o no un nuevo evento.

En tiempos anteriores esto se lograba utilizando librerías y frameworks de Javascript al estilo de jQuery, ya que el soporte por HTML estaba limitado, sin embargo con HTML5, tenemos estas funcionalidades ya incluidas en nuestro navegador.

Creando los elementos para el drag

En el documento HTML tenemos que definir los elementos que van a poder utilizar este efecto, para ello contamos con algunas propiedades que nos ayudaran en este propósito.

Al colocar el atributo draggable a un elemento le indicamos al navegador que este elemento puede o no ser arrastrado, para ello el atributo cuenta con los valores true, false y auto, como podemos inferir true le indica al navegador que si debe ser un elemento que se arrastre, false es lo contrario, deshabilita el efecto y auto indica al navegador que debe tomar la decisión de activar o no el efecto él.

Una buena práctica es utilizar true o false para explícitamente indicar si está o no activado el efecto, porque a pesar que la mayoría de los navegadores interpretan el valor auto como true, no debemos dejar a terceros el curso de nuestra página.

Eventos del efecto drag

Antes de pasar al ejemplo vamos a definir otra característica importante del arrastre o drag de un elemento, esto es que al iniciar el arrastre de un elemento tenemos 3 eventos que podemos identificar y con los cuales podemos realizar varios procesamientos de quererlo estos eventos son:

dragstart, es el inicio del evento de arrastre ocurre al colocar el mouse sobre el elemento, hacer click y empezar a arrastrar dicho elemento.

drag, ocurre luego del dragstart y dura todo el trayecto que estemos arrastrando el elemento.

dragend, ocurre al momento en que dejamos de arrastrar el elemento, ya sea que lo dejemos en la zona de depósito, o que nos hayamos arrepentido y lo hayamos dejado de arrastrar a mitad de camino.

Implementación del drag

Veamos a continuación un ejemplo de cómo incorporamos todo lo anterior en una página, vamos a crear una lista de elementos a los cuales le vamos a asignar el atributo draggable como true, crearemos unas clases css que nos permitirán modificar sus estilos y por último con los eventos mencionados cuando hagamos el arrastre o drag de un elemento este va a cambiar de color.

Veamos el código:

<!DOCTYPE HTML>
<html>
    <head>
	    <title>Ejemplo</title>
	    <style>
		    #src > * {float:left;}
		    #target, #src > img {border: thin solid black; padding: 2px; margin:4px;}
		    #target {height: 81px; width: 81px; text-align: center; display: table;}
    		#target > p {display: table-cell; vertical-align: middle;}
		    #target > img {margin: 1px;}
		    img.dragged {background-color: lightgrey;}
			
	    </style>
    </head>
    <body>
	    <div id="src">
		    <img draggable="true" id="banana" src="banana100.png" alt="banana"/>
		    <img draggable="true" id="apple" src="apple100.png" alt="apple"/>
		    <img draggable="true" id="cherries" src="cherries100.png" alt="cherry"/>
		    <div id="target">
			    <p id="msg">Depositar aquí</p>
		    </div>			
	    </div>			
	
	    <script>
		    var src = document.getElementById("src");
		    var target = document.getElementById("target");
		    var msg = document.getElementById("msg");
		  
		    src.ondragstart = function(e) {
			    e.target.classList.add("dragged");
		    }
	  
		    src.ondragend = function(e) {
			    e.target.classList.remove("dragged");
			    msg.innerHTML = "Depositar aquí";
		    }
		  
		    src.ondrag = function(e) {
			    msg.innerHTML = e.target.id;
		    }
	    </script>
    </body>
</html>

Ahora como luce en nuestro navegador:

html5_dragdrop_parte1.jpg


Con esto finaliza la primera parte de este tutorial, en la siguiente parte veremos cómo preparar la zona de depósito o drop.

¿Te ayudó este Tutorial?


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!

X