Arrastrar y soltar HTML5

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

Arrastre y soltar

Arrastre y soltar (Drag y Drop) es una característica muy común. Se refiere a que agarras algo y lo arrastras a una posición diferente.

El arrastre y soltar es una parte del estándar HTML5: cualquier elemento es arrastrable.

Compatibilidad del navegador

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

API
Arrastre y soltar 4.0 9.0 3.5 6.0 12.0

Ejemplo de arrastre y soltar en HTML

A continuación, se muestra un ejemplo simple sobre el arrastre 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 arrastre y soltar.

Establecer el elemento como arrastrable

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

<img draggable="true">

Contenido de arrastre 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放置 - ondragover

El evento ondragover especifica dónde se pueden放置 los datos arrastrados.

Por defecto, los datos/elementos no se pueden放置 en otros elementos. Para implementar el arrastrar y soltar, debemos evitar este tratamiento predeterminado de los elementos.

Esta tarea se realiza 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:

  • Llamar a preventDefault() para evitar el tratamiento predeterminado del navegador de los datos (el comportamiento predeterminado del evento de soltar 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