English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Arrastrar y soltar es una característica común, que permite arrastrar un objeto y soltarlo en otra posición. En HTML5 en, arrastrar y soltar es parte del estándar, cualquier elemento puede ser arrastrado y soltado.
Arrastrar y soltar (Drag y drop) es una característica de HTML5 parte estándar.
Colocar w3icono de codebox.COM arrastrar al cuadro rectangular.
Arrastrar y soltar es una característica común, que permite arrastrar un objeto y soltarlo en otra posición.
en HTML5 en, arrastrar y soltar es parte del estándar, cualquier elemento puede ser arrastrado y soltado.
Internet Explorer 9+, Firefox, Opera, Chrome y Safari admiten arrastrar y soltar.
Nota:Safari 5.1.2No admite arrastrar y soltar.
El siguiente ejemplo es un ejemplo simple de arrastrar y soltar:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Manual básico(oldtoolbag.com)</title>
<style type="text/css">
#div1 {ancho:350px; altura:70px; relleno:10px; borde:1px sólido #aaaaaa;}
</style>
<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>
<p>Arrastrar oldtoolbag.com mover la imagen a un cuadro rectangular:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1"src="/static/images/logo-n.png" draggable="true" ondragstart="drag(event)" width="336"height="69">
</body>
</html>prueba a ver ‹/›Parece algo complejo, pero podemos estudiar por separado las diferentes partes de los eventos de arrastre y soltar.
Primero, para hacer que el elemento sea arrastrable, configure la propiedad draggable como true:
<img draggable="true">
Luego, se especifica qué sucede cuando se arrastra un elemento.
En el ejemplo anterior, la propiedad ondragstart llama a una función, drag(event), que especifica los datos arrastrados.
El método dataTransfer.setData() establece el tipo de datos y el valor de los datos arrastrados:
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
Text es un DOMString que representa el tipo de datos arrastrados que se van a agregar al objeto de arrastre. El valor es el id del elemento arrastrable ("drag1)。
El evento ondragover determina dónde se puede colocar los datos arrastrados.
Por defecto, no se puede/Un elemento se coloca dentro de otro elemento. Si queremos permitir la colocación, debemos evitar la forma predeterminada de manejar el elemento.
Esto se realiza llamando al método event.preventDefault() del evento ondragover:
event.preventDefault()
Se produce el evento drop cuando se coloca 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 procesamiento predeterminado de datos del navegador (el comportamiento predeterminado del evento de soltar es abrir como enlace)
Obtener los datos arrastrados mediante el método getData("Text") de dataTransfer. Este método regresará cualquier datos de tipo idéntico que se haya establecido en setData().
Los datos arrastrados son el id del elemento arrastrado ("drag1)
Añadir el elemento arrastrado al elemento de destino (elemento de destino)
HTML5Arrastrar y soltar imágenes de ida y vuelta
Cómo arrastrar y soltar imágenes entre dos elementos <div>.