Arrastrar y soltar HTML5

Arrastra la imagen de CodeW3C.com al rectángulo.

Arrastrar y soltar

La característica de arrastrar y soltar (Drag y Drop) es muy común. Se refiere a que puede agarrar algo y arrastrarlo a diferentes posiciones.

El arrastrar y soltar es parte de la norma HTML5: cualquier elemento es arrastrable.

Compatibilidad del navegador

Los números en la tabla indican la versión del navegador que admite completamente el arrastrar y soltar.

API
Arrastrar y soltar 4.0 9.0 3.5 6.0 12.0

Ejemplo de arrastrar y soltar en HTML

A continuación, se muestra un ejemplo simple sobre arrastrar y soltar:

Ejemplo

<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev) {
    ev.preventDefault();
}
function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>
</html>

Prueba personalmente

Puede parecer un poco complicado, pero estudiemos todas las diferentes partes del evento de arrastrar y soltar.

Establecer un elemento como arrastrable

Primero: para establecer un elemento como arrastrable, configure la propiedad draggable como true:

<img draggable="true">

Contenido de arrastrar y soltar - ondragstart y setData()

Luego, se define qué sucede cuando el elemento se arrastra.

En el ejemplo anterior, la propiedad ondragstart llama a la función drag(event) para definir qué datos se arrastran.

El método setData() de dataTransfer establece el tipo de datos y el valor de los datos arrastrables:

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

En este ejemplo, el tipo de datos es "text" y el valor es el id del elemento arrastrable ("drag1").

Dónde arrastrar - ondragover

El evento ondragover define dónde pueden ser colocados los datos arrastrados.

Por defecto, los datos/elementos no pueden ser colocados en otros elementos. Para implementar el arrastrar y soltar, debemos evitar este comportamiento predeterminado de los elementos.

Esta tarea se completa mediante el método event.preventDefault() del evento ondragover:

event.preventDefault();

Realizar la colocación - ondrop

Se produce el evento drop cuando se suelta los datos arrastrados.

En el ejemplo anterior, la propiedad ondrop llama a una función, drop(event):

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}

Explicación del código:

  • Llame a preventDefault() para evitar el manejo predeterminado del navegador de los datos (el comportamiento predeterminado del evento drop es abrir como enlace)
  • Obtener los datos arrastrados mediante el método getData() de dataTransfer. Este método devolverá cualquier tipo de datos configurados en setData()
  • Los datos arrastrados son el id del elemento arrastrado ("drag1")
  • Añadir el elemento arrastrado al elemento de destino

Más ejemplos

Arrastrar y soltar imágenes

Cómo arrastrar y soltar imágenes entre dos elementos <div>:

Arrastra la imagen de CodeW3C.com al rectángulo.

Prueba personalmente