Arrastrar y soltar es una parte del estándar HTML5.
Arrastre la imagen de arriba en el rectángulo.
en HTML
El borrador de la especificación de trabajo HTML5 incluye soporte para arrastrar y soltar. HTML5 es compatible con diferentes tipos de arrastrar y soltar características que incluyen:
- textos de arrastrar y soltar y códigos HTML
- elementos HTML de arrastrar y soltar
- archivos de arrastrar y soltar
Sobre la base de las acciones necesarias, uno de los tipos anteriores se pueden utilizar. Tenga en cuenta que cuando un elemento HTML se arrastra para mover su posición actual, su ID se envía al elemento principal destino; por lo que envía un texto y se puede considerar como el primer grupo.
aplicación de correo electrónico basado en Internet de Google Gmail soporta arrastrar y soltar archivos adjuntos de imágenes y en la última versión del navegador Google Chrome y Safari (5.x) de Apple. Y la búsqueda de imágenes de Google soporta arrastrar y soltar.
Arrastrar y soltar
Arrastrar y soltar es una característica muy común. Que es cuando se "grab" un objeto y arrastrarlo a una ubicación diferente.
En HTML5, arrastrar y soltar es parte de la norma, y cualquier elemento puede ser arrastrable.
Soporte del navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con arrastrar y soltar.
| API | |||||
|---|---|---|---|---|---|
| Drag and Drop | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
Arrastre HTML y Ejemplo gota
El ejemplo siguiente es un simple arrastrar y soltar ejemplo:
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> Inténtalo tú mismo " Puede parecer complicado, pero vamos a ir a través de todas las diferentes partes de un evento de arrastrar y soltar.
Hacer una Arrastrable Elemento
En primer lugar: Para que se pueda arrastrar un elemento, establecer el draggable atributo a true :
<img draggable="true">
Qué Arrastre - ondragstart y setData()
A continuación, especifique lo que debe suceder cuando se arrastra el elemento.
En el ejemplo anterior, el ondragstart atributo llama a una función, drag(event) , que especifica qué datos se pueden arrastrar.
El dataTransfer. setData() dataTransfer. setData() método establece el tipo de datos y el valor de los datos arrastrados:
function drag(ev) {
ev.dataTransfer. setData("text", ev.target.id) ;
}
En este caso, el tipo de datos es "text" y el valor es el id del elemento arrastrable ("drag1") .
Cuando en Drop - ondragover
El ondragover evento especifica dónde los datos arrastrados se pueden descartar.
Por defecto, los datos / elementos no pueden ser dejados en otros elementos. Para permitir una caída, hay que evitar que el modo predeterminado del elemento.
Esto se realiza mediante una llamada al event. preventDefault() event. preventDefault() método para la ondragover evento:
event . preventDefault()
Hacer la gota - ondrop
Cuando se deja caer los datos arrastrados, un evento de caída se produce.
En el ejemplo anterior, la ondrop atributo llama a una función, drop(event) :
function drop(ev) {
ev. preventDefault() ;
var data = ev.dataTransfer. getData("text") ;
ev.target. appendChild(document.getElementById(data) );
}
Código explicó:
- Llame a preventDefault() para evitar la manipulación del navegador por defecto de los datos (default is open as link on drop)
- Obtener los datos arrastrados con el dataTransfer. getData() dataTransfer. getData() método. Este método devolverá todos los datos que se estableció al mismo tipo en el setData() método
- Los datos arrastrados es el id del elemento arrastrado ("drag1")
- Anexar el elemento arrastrado en la drop elemento
Imagen de arrastre de ida y vuelta
Cómo arrastrar (and drop) una imagen de ida y vuelta entre dos <div> elementos.