Evento ondrop
Esempio
Esegui un JavaScript quando un elemento trascinabile viene rilasciato in un elemento <div>:
<div ondrop="myFunction(event)"></div>
Altri esempi "Provalo da solo" di seguito.
Definizione e utilizzo
L'evento ondrop si verifica quando un elemento trascinabile o una selezione di testo viene rilasciato su una destinazione di rilascio valida.
Il trascinamento della selezione è una funzionalità molto comune in HTML5. È quando "afferri" un oggetto e lo trascini in una posizione diversa. Per ulteriori informazioni, consulta il nostro Tutorial HTML su HTML5 Drag and Drop .
Nota: per rendere trascinabile un elemento, utilizza l' attributo trascinabile HTML5 globale.
Suggerimento: i collegamenti e le immagini sono trascinabili per impostazione predefinita e non necessitano dell'attributo trascinabile.
Ci sono molti eventi che vengono utilizzati e possono verificarsi nelle diverse fasi di un'operazione di trascinamento della selezione:
- Eventi attivati sulla destinazione trascinabile (l'elemento di origine) :
- ondragstart - si verifica quando l'utente inizia a trascinare un elemento
- ondrag - si verifica quando un elemento viene trascinato
- ondragend - si verifica quando l'utente ha finito di trascinare l'elemento
- Eventi attivati sul bersaglio di rilascio:
- ondragenter - si verifica quando l'elemento trascinato entra nella destinazione di rilascio
- ondragover - si verifica quando l'elemento trascinato si trova sopra la destinazione di rilascio
- ondragleave - si verifica quando l'elemento trascinato lascia la destinazione di rilascio
- ondrop - si verifica quando l'elemento trascinato viene rilasciato sulla destinazione di rilascio
Supporto browser
I numeri nella tabella specificano la prima versione del browser che supporta completamente l'evento.
Event | |||||
---|---|---|---|---|---|
ondrop | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
Sintassi
In HTML:
<element ondrop="myScript">
In JavaScript:
object.ondrop = function(){myScript};
In JavaScript, utilizzando il metodo addEventListener():
object.addEventListener("drop", myScript);
Nota: il metodo addEventListener() non è supportato in Internet Explorer 8 e versioni precedenti.
Dettagli tecnici
Bolle: | sì |
---|---|
Annullabile: | sì |
Tipo di evento: | Trascina Evento |
Tag HTML supportati: | Tutti gli elementi HTML |
Versione DOM: | Eventi di livello 3 |
Altri esempi
Esempio
Una dimostrazione di TUTTI i possibili eventi di trascinamento della selezione:
<p draggable="true" id="dragtarget">Drag me!</p>
<div class="droptarget">Drop here!</div>
<script>
// Events fired on the drag target
document.addEventListener("dragstart", function(event) {
// The dataTransfer.setData() method sets the data type and the value of the dragged data
event.dataTransfer.setData("Text", event.target.id);
// Output some text when starting to drag the p element
document.getElementById("demo").innerHTML = "Started to drag the p element.";
// Change the opacity of the draggable element
event.target.style.opacity = "0.4";
});
// While dragging the p element, change the color of the output text
document.addEventListener("drag", function(event) {
document.getElementById("demo").style.color = "red";
});
// Output some text when finished dragging the p element and reset the opacity
document.addEventListener("dragend", function(event) {
document.getElementById("demo").innerHTML = "Finished dragging the p element.";
event.target.style.opacity = "1";
});
// Events fired on the drop target
// When the draggable p element enters the droptarget, change the DIVS's border style
document.addEventListener("dragenter", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "3px dotted red";
}
});
// By default, data/elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element
document.addEventListener("dragover", function(event) {
event.preventDefault();
});
// When the draggable p element leaves the droptarget, reset the DIVS's border style
document.addEventListener("dragleave", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "";
}
});
/* On drop - Prevent the browser default handling of the data (default is open as link on drop)
Reset the color of the output text and DIV's border color
Get the dragged data with the dataTransfer.getData() method
The dragged data is the id of the dragged element ("drag1")
Append the dragged element into the drop element
*/
document.addEventListener("drop", function(event) {
event.preventDefault();
if ( event.target.className == "droptarget" ) {
document.getElementById("demo").style.color = "";
event.target.style.border = "";
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}
});
</script>
Pagine correlate
Esercitazione HTML: trascina e rilascia HTML5
Riferimento HTML: Attributo trascinabile HTML