Una breve introducción sobre drag an drop

2. Descripción

3. 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 alguna objeció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.

4. 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
a la función. Por lo tanto, si
queremos hacer que una imagen
se pueda arrastrar debemos
escribir el siguiente código:
<img id="img" draggable="true" src=“ruta_foto.jpg" ondragstart="drag(this, event)"/>

5. Para poder incluir texto junto con nuestra imagen
le agregamos la propiedad al párrafo.
<p id="parrafo" draggable="true" id="span" ondragstart="drag(this, event)">
<img id="img" src=“ruta_foto.jpg" />
<span id="span">Puedes arrastrarme</span>
</p>
Y en Java Script pondremos:
function drag(parrafo, evento) {
evento.dataTransfer.setData('Text', parrafo.id);
}

6. 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.
<div id="contenedor" ondrop="drop(this, event)" ondragenter="return
false" ondragover="return false">Contenendor</div>

7. Por su parte en la función
&quot;drop&quot; de Javascript debemos
llamar a preventDefault(), para indicar que
el soltado es permitido en esa zona.
function drop(contenedor, evento) {
var id = evento.dataTransfer.getData('Text');
contenedor.appendChild(document.getElementById(id));
evento.preventDefault();
}

8. Así se hace el HTML

9. Y así el CSS