Software Educativo

Paso 1: crear los elementos
La primera parte de nuestro proceso consiste en crear el o los elementos que serán arrastrados, para ello debemos darle esta propiedad, es por eso que debemos agregar el atributo “draggable” con el valor “true”, dentro de la etiqueta que corresponde al elemento que queremos utilizar.
Este atributo le indicará al navegador que este elemento se puede mover sin algunaobjeción, por default los objetos no tienen permitido ser arrastrados, es por ello que si no agregamos el atributo “draggable” el objeto no podrá ser movido.
Paso 2: hacer draggable el elemento
Como segundo paso debemos mandar llamar la función “drag” de Javascript, existen varios formas de hacerlo, una manera sencilla es agregarle el atributo “ondragstart” en cuyo valor mandaremos llamar ala función. Por lo tanto, si queremos hacer que una imagen se pueda arrastrar debemos escribir el siguiente código:
?
1 | <img id="img" draggable="true" src="http://t0.gstatic.com/images?q=tbn:HQhMN5ibPav1DM:http://thecitylovesyou.com/cinerex/wp-content/uploads/2009/10/500-days-of-summer-soundtrack.jpg" ondragstart="drag(this, event)"/> |
En nuestro caso agregaremos la propiedad a unpárrafo para así poder incluir texto junto con nuestra imagen:
?
1234 | <p id="parrafo" draggable="true" id="span" ondragstart="drag(this, event)"><img id="img" src="http://t0.gstatic.com/images?q=tbn:HQhMN5ibPav1DM:http://thecitylovesyou.com/cinerex/wp-content/uploads/2009/10/500-days-of-summer-soundtrack.jpg" /><br/><span id="span">Arrastrame!</span></p> |Mientras que el Javascript lucirá de ésta manera:
?
123 | function drag(parrafo, evento) {evento.dataTransfer.setData('Text', parrafo.id);} |
Paso 3: dar formato a los elementos
Después de crear los elementos que queremos arrastrar, pasamos a darle forma al contenedor donde los soltaremos; para ello podemos elegir un elemento div el cual deberá llevar los atributos “ondrop”, “ondragenter” y“ondragover”.
El atributo “ondrop” permitirá llamar la función Javascript para llevar la tarea una vez que el elemento ha sido soltado sobre el contenedor. Dado que el comportamiento por defecto del navegador es cancelar soltados, devolver false en los atributos “dragenter” y “dragover”permitirá el movimiento.
?
1 | <div id="contenedor" ondrop="drop(this, event)" ondragenter="returnfalse" ondragover="return false">Contenendor</div> |
Por su parte en la función "drop" de Javascript debemos llamar a preventDefault(), para indicar que el soltado es permitido en esa zona.
?
123456 | function drop(contenedor, evento) {var id = evento.dataTransfer.getData('Text');contenedor.appendChild(document.getElementById(id));evento.preventDefault(); } |
Valeaclarar que estos eventos nos permiten enviar información junto con el elemento que estamos arrastrado, es por ello que se puede utilizar para importar datos a otro elemento.
Paso 4: Tachan! drag and drop
Con estas funciones y atributos nuestra página ya debe tener la funcionalidad para importar el párrafo al contenedor receptor, y el código HTML final quedaría de la siguiente manera:
Ahorasimplemente basta con que agreguemos un poco de estilo a los elementos para darle una mejor presentación a nuestra página. Agregar un color de fondo diferente para el cuerpo y el contenedor, al igual que un borde, ayudará al cliente a distinguir la zona receptora.
En este caso, nuestro espacio de desplazamiento será la ventana del navegador donde se este desplegando nuestro sitio, es por ello quepodemos colocar el objeto a desplazar en cualquier lugar que deseemos, incluso si queremos ver mejor el efecto podemos colocar el elemento y el contenedor en dos lugares distantes.
?
1234567891011121314151617181920212223242526272829303132 | Con estos datos podemos idear una hoja de estilo como la siguiente:<br />body{background: #045FB4; /* el color de fondo de nuestra página...