Programmer Fare clic su

Drag and Drop (Drag and Drop) è parte integrante dello standard HTML5. Qualsiasi oggetto può essere trascinato e rilasciato. Letteralmente, trascinare e rilasciare è prendere un oggetto e trascinarlo in un’altra posizione.

Nella documentazione MDN ufficiale, la funzione di trascinamento e rilascio è descritta come segue: il trascinamento HTML consente alle applicazioni utilizzano la funzionalità di trascinare e rilasciare in firefox e altri browser. Ad esempio, attraverso queste funzioni, gli utenti possono utilizzare il mouse per selezionare gli elementi trascinati, trascinare gli elementi su elementi drone e posizionare questi elementi rilasciando il pulsante del mouse. Un elemento traslucido dell’elemento di trascinamento indica che il puntatore del mouse viene seguito durante il funzionamento dell’unità.

Per siti Web, estensioni e applicazioni XUL, è possibile personalizzare i tipi di elementi che possono essere trascinati, il tipo di commenti generato dagli elementi trascinati e dagli elementi che possono essere posizionati.

Nota: l’elemento IMG e un elemento (devono specificare HREF) consentono di trascinare e rilasciare per impostazione predefinita.

Guarda Ad esempio:

<!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>

Determina cosa viene trascinato ( Poiché l’IMG può essere trascinato e diminuito per impostazione predefinita, l’elemento che può essere trascinato nel codice sopra può anche essere scritto e per altri elementi: per rendere l’elemento strisciato, prima impostare l’attributo di trascinamento in True, più il Global OnDragstart Funzione del controller di eventi
Definisci dati di trascinamento
Ogni trawler ha a DataTransfer Attributo per salvare i dati dell’evento. Questa proprietà (DataTransfer Object) ha anche metodi per la gestione dei dati di trascinamento. Il metodo SetData () aggiunge i dati di trascinamento di un elemento, come mostrato nel seguente codice di esempio:

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

In questo esempio, il tipo di dati è ” Testo “e il valore è l’ID dell’elemento trascinato (” Drag1 “).
Definisci un’area autunnale
L’evento OndragerPer specifica dove posizionare i dati trascinati. Per impostazione predefinita, i dati / gli elementi non possono essere posizionati su altri elementi. Se è necessario impostare la posizione consentita, dobbiamo evitare la gestione predeterminata di elementi come segue:

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

site. Quando i dati trascinati sono posizionati, Se produce un evento di caduta. Come segue:

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 maggiori dettagli vedere: MDN Trascina e rilascia ~

Leave a Comment

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *