Arrastrar y soltar HTML5
Arrastrar y soltar HTML5
Arrastre la imagen de W3Schools al rectángulo.
Arrastrar y soltar
Arrastrar y soltar es una característica muy común. Es cuando "agarras" un objeto y lo arrastras a una ubicación diferente.
En HTML5, arrastrar y soltar forma parte del estándar: cualquier elemento puede ser arrastrable.
Soporte del navegador
Los números en la tabla especifican la primera versión del navegador que admite completamente Arrastrar y soltar.
| API | |||||
|---|---|---|---|---|---|
| Drag and Drop | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
Ejemplo de arrastrar y soltar HTML
El siguiente ejemplo es un simple ejemplo de 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>
Puede parecer complicado, pero permite ver todas las partes diferentes de un evento de arrastrar y soltar.
Hacer un elemento arrastrable
En primer lugar: para hacer que un elemento sea arrastrable, establezca el atributo que se puede arrastrar a verdadero:
<img draggable="true">
Qué arrastrar - ondragstart y setData ()
Luego, especifique lo que debería suceder cuando se arrastra el elemento.
En el ejemplo anterior, el atributo ondragstart llama a una función, arrastrar (evento), que especifica qué datos arrastrar.
El método dataTransfer.setData () establece el tipo de datos y el valor de los datos arrastrados:
dataTransfer
En este caso, el tipo de datos es "texto" y el valor es la identificación del elemento arrastrable ("drag1").
Dónde dropear - ondragover
El evento ondragover especifica dónde pueden soltarse los datos arrastrados.
Por defecto, los datos / elementos no se pueden descartar en otros elementos. Para permitir una caída, debemos evitar el manejo predeterminado del elemento.
Esto se hace llamando al método event.preventDefault () para el evento ondragover:
event.preventDefault()
Hacer el Drop - ondrop
Cuando se eliminan los datos arrastrados, se produce un evento drop.
En el ejemplo anterior, el atributo 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));
}
Código explicado:
- Llame a preventDefault () para evitar el manejo predeterminado del navegador de los datos (el valor predeterminado es abrir como enlace al soltar)
- Obtenga los datos arrastrados con el método dataTransfer.getData (). Este método devolverá cualquier información que se haya establecido en el mismo tipo en el método setData ()
- Los datos arrastrados son la identificación del elemento arrastrado ("drag1")
- Añada el elemento arrastrado al elemento desplegable
Más ejemplos
Arrastrar imagen de un lado a otro
Cómo arrastrar (y soltar) una imagen hacia adelante y hacia atrás entre dos elementos <div>:
Entradas más populares de este blog
Listado pasaporte y cedulas SAIME 2018
click aqui para descargar el listado en formato pdf 21 de Julio de 2018 Con el propósito de dar celeridad al proceso de entrega de documentos, el Director General del Servicio Administrativo de Identificación, Migración y Extranjería (Saime), Gustavo Vizcaíno Gil, ordenó habilitar todas las oficinas del país los días sábados, únicamente para la entrega de cédulas y pasaportes. Saime abre sus oficinas los días sábados Con el propósito de dar celeridad al proceso de entrega de documentos, el Director General del Servicio Administrativo de Identificación, Migración y Extranjería (Saime), Gustavo Vizcaíno Gil, ordenó habilitar todas las oficinas del país los días sábados, únicamente para la entrega de cédulas y pasaportes. Los usuarios podrán ingresar en la página web del Saime www.saime.gob.ve y verificar si están en el listado donde le indicará en que oficina pueden retirar sus documentos de identificación. Esta iniciativa da cumplimiento a la sép...
Etiqueta HTML < abbr >
Etiqueta HTML <abbr> ❮ Referencia HTML completa anterior Siguiente ❯ Ejemplo Una abreviatura se marca de la siguiente manera: The < abbr title ="World Health Organization" > WHO < /abbr > was founded in 1948. Pruebelo usted mismo » Definición y uso La etiqueta <abbr> define una abreviatura o un acrónimo, como "Sr.", "Dec.", "ASAP", "ATM". Sugerencia: una abreviatura y un acrónimo son versiones abreviadas de otra cosa. Ambos a menudo se representan como una serie de letras. Marcar las abreviaturas puede proporcionar información útil para navegadores, sistemas de traducción y motores de búsqueda. Soporte del navegador Element <abbr> Yes Yes Yes Yes Yes Consejos y notas Consejo: El atributo de título global se puede usar en la etiqueta <abbr> para mostrar la versión completa de la abreviatura / acrónimo al pasar el mouse sobre el elemento <abbr>. Difere...
HTML < a > tag
HTML <a> día ❮ Referencia HTML completa anterior Siguiente ❯ Ejemplo Un enlace a W3Schools.com: < a href ="https://www.w3schools.com" > Visit W3Schools.com! < /a > Pruebelo usted mismo » More "Pruebelo usted mismo" examples below. Definición y uso La etiqueta <a> define un hipervínculo, que se usa para vincular de una página a otra. El atributo más importante del elemento <a> es el atributo href, que indica el destino del enlace. Por defecto, los enlaces aparecerán de la siguiente manera en todos los navegadores: Un enlace no visitado está subrayado y azul Un enlace visitado está subrayado y morado Un enlace activo está subrayado y rojo Soporte del navegador Element <a> Yes Yes Yes Yes Yes Consejos y notas Sugerencia: los siguientes atributos: descarga, hreflang, medios, rel, destino y tipo no pueden estar presentes si el atributo href no está presente. Consejo: Normalmente,...