El mejor tutorial de Drag and Drop HTML5 en 2024. En este tutorial podrás aprender Arrastrar y soltar,Soporte para el navegador,Arrastre HTML5 y ejemplos de caída,Ejemplos,El elemento está prevista que caiga,Lo que arrastrar - ondragstart y setData (),¿Dónde poner - ondragover,Ser colocado - ondrop,más ejemplos,
Arrastrar y soltar (drag and drop) es parte del estándar HTML5.
W3cschool icono y arrastrarlo al rectángulo.
Arrastrar y soltar es una característica común, que consiste en rastrear en otro lugar después de que el objeto.
En HTML5, arrastrar y soltar es una parte estándar de cualquier elemento puede arrastrar y soltar.
Internet Explorer 9 o superior, Firefox, Opera, Chrome, Safari y arrastre de apoyo.
Nota: Safari 5.1.2 no es compatible con la resistencia.
El siguiente ejemplo es un simple arrastrar y soltar Ejemplo:
Puede parecer un poco complicado, pero hemos sido capaces de estudiar diferentes partes del arrastrar y soltar eventos.
En primer lugar, a fin de que se pueda arrastrar el elemento, establezca el atributo se puede arrastrar a la verdadera:
Entonces, cuando el elemento se arrastra disposición, lo que sucederá.
En el ejemplo anterior, ondragstart atributo llama a una función, arrastre (evento), que define los datos que se arrastran.
dataTransfer.setData método () para establecer el tipo de datos y el valor remolcado datos:
En este ejemplo, el tipo de datos es "texto", el valor es Identificación del elemento arrastrable ( "drag1").
ondragover evento especifica dónde colocar los datos que se arrastran.
De manera predeterminada, no se puede colocar los datos / elementos en otros elementos. Si necesita configurar le permite colocar, hay que evitar que el modo predeterminado del elemento.
Hacerlo llamando ondragover método event.preventDefault evento ():
Cuando se coloca datos arrastrados, la caída se produce el evento.
En el ejemplo anterior, ondrop atributo llama a una función, gota (evento):
Código explicación:
Arrastrar y soltar la imagen de ida y vuelta
Cómo arrastrar y soltar imágenes entre dos elementos <div>.