Programador Prema

Arrastrar e soltar (arrastrar e soltar) é unha parte integrante do estándar HTML5. Calquera elemento pode ser arrastrado e caeu. Literalmente, arrastrar e soltar e coller un obxecto e arrastra-o para outro local

Na documentación oficial MDN, a función de arrastrar e soltar é descrito do seguinte xeito :. O arrastrar e soltar HTML permite aplicacións usar a funcionalidade de arrastrar e soltar en Firefox e outros navegadores. Por exemplo, a través destas funcións, os usuarios poden usar o rato para seleccionar elementos arrastrados, arrastre elementos a elementos de drone e coloque estes elementos liberando o botón do rato. Un elemento translúcido do elemento de arrastre indica que o punteiro do rato é seguido durante a operación da unidade.

Para sitios web, extensións e aplicacións XUL, pode personalizar os tipos de elementos que poden ser arrastrados, o tipo de comentarios xerado polos elementos arrastrados e os elementos que se poden colocar.

Nota: o elemento IMG e un elemento (debe especificar HREF) Permítelle arrastrar e soltar por defecto.

Mira Nun exemplo:

<!DOCTYPE HTML><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #div1 { width: 200px; height: 100px; padding: 10px; border: 1px solid red; } </style> <script type="text/javascript"> 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>Arrastre y suelte la imagen en el rectángulo:</p> <div ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br /> <img src="drag-image.png" draggable="true" ondragstart="drag(event)" /> </body></html>

Determinar o que se arrastra
( Dado que o IMG pode ser arrastrado e causado por defecto, o elemento que pode ser arrastrado ao código anterior tamén pode ser escrito e para outros elementos: facer que o elemento se arrastre, primeiro configure o atributo de arrastrar en verdadeiro, máis o Global Ondragstart Función do controlador de eventos
Definir datos de arrastre
Cada arrastre ten un DataTransfer Attribute para gardar os datos do evento. Esta propiedade (obxecto de Datatransfer) tamén ten métodos para xestionar datos de arrastrar. O método setData () engade os datos de arrastre dun elemento, como se mostra no seguinte código de mostra:

function drag(ev){ ev.dataTransfer.setData("Text",ev.target.id);}

Neste exemplo, o tipo de datos é ” Texto “eo valor é o ID do elemento arrastrado (” Drag1 “).
Definir unha área de outono
O evento de ondragover especifica onde colocar os datos arrastrados. Por defecto, os datos / elementos non se poden colocar noutros elementos. Se precisa configurar a localización permitida, debemos evitar o manexo predeterminado dos elementos do seguinte xeito:

function allowDrop(ev) { ev.preventDefault();}

Sitio
cando se coloca os datos arrastrados, Se produce un evento de outono. Do seguinte xeito:

function drop(ev) { // Llame a preventDefault () para evitar el procesamiento predeterminado de datos por parte del navegador ev.preventDefault(); // Obtenga los datos que arrastra el método dataTransfer.getData ("Texto"). Este método devolverá cualquier conjunto de datos al mismo tipo en el método setData (). var data = ev.dataTransfer.getData("Text"); // Los datos arrastrados son la identificación del elemento arrastrado ("drag1"), agregue el elemento arrastrado al elemento colocado (elemento de destino) ev.target.appendChild(document.getElementById(data));}

Para máis detalles vexa: MDN arrastrar e soltar ~

Leave a Comment

O teu enderezo electrónico non se publicará Os campos obrigatorios están marcados con *