Ondragend Evento

❮ Precedente Riferimento eventi Avanti ❯

Esempio

Esegui un JavaScript quando l'utente ha finito di trascinare un elemento <p>:

Altri esempi "Provalo da solo" di seguito.

Definizione e utilizzo

L'evento ondragend si verifica quando l'utente ha terminato di trascinare un elemento o una selezione di testo.

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
ondragend	4.0	9.0	3.5	6.0	12.0

Sintassi

In HTML:

<element ondragend="myScript">

In JavaScript:

object.ondragend = function(){myScript};

In JavaScript, utilizzando il metodo addEventListener():

object.addEventListener("dragend", myScript);

Nota: il metodo addEventListener() non è supportato in Internet Explorer 8 e versioni precedenti.

Dettagli tecnici

Bolle:	sì
Annullabile:	No
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>