programador clic

Arrossegar i deixar anar (Arrossegar i deixar anar) és una part integral de l’estàndard HTML5. Qualsevol element es pot arrossegar i deixar anar. Literalment, arrossegar i deixar anar és agafar un objecte i arrossegar-lo a una altra ubicació.

En la documentació oficial de MDN, la funció d’arrossegar i deixar anar es descriu de la següent manera: la interfície d’arrossegar i deixar anar HTML permet a les aplicacions utilitzar la funcionalitat d’arrossegar i deixar anar a Firefox i altres navegadors. Per exemple, a través d’aquestes funcions, els usuaris poden utilitzar el ratolí per seleccionar elements arrossegables, arrossegar elements a elements dropables i col·locar aquests elements deixant anar el botó de l’ratolí. Un element translúcid de l’element arrastrable indica que segueix el punter de l’ratolí durant l’operació d’arrossegament.

Per a llocs web, extensions i aplicacions XUL, pot personalitzar els tipus d’elements que es poden arrossegar, el tipus de comentaris generats pels elements arrossegables i els elements que es poden col·locar.

Nota: L’element img i un element (d’especificar href) permeten arrossegar i deixar anar per defecte.

Mira 1 exemple:

<!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 què és arrastrable gratis (Atès que el img es pot arrossegar i deixar anar per defecte, l’element que es pot arrossegar en el codi anterior també es pot escriure a i per altres elements: per fer que l’element sigui arrastrable, primer estableixi l’atribut arrastrable a veritable, més la funció de controlador d’esdeveniments global ondragstart a Definir dades d’arrossegament a Cada esdeveniment d’arrossegament té un atribut dataTransfer per guardar les dades de l’esdeveniment. Aquesta propietat (objecte DataTransfer) també té mètodes per administrar dades d’arrossegament. El mètode setData () afegeix les dades d’arrossegament d’un element, com es mostra en el següent codi de mostra:

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

En aquest exemple, el tipus de dades és “Text” i el valor és l’id de l’element arrastrable ( “drag1”).
Definir una zona de caiguda a l’esdeveniment ondragover especifica on posar les dades arrossegats. Per defecte, les dades / elements no es poden col·locar en altres elements. Si necessita establir la ubicació permesa, hem d’evitar el maneig predeterminat d’elements de la següent manera:

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

Lloc
Quan es col·loquen les dades arrossegats, es produeix un esdeveniment de caiguda. Com segueix:

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));}

Per a més detalls veure: MDN arrossegar i deixar anar ~

Leave a Comment

L'adreça electrònica no es publicarà. Els camps necessaris estan marcats amb *