ondragend Wydarzenie

❮ Poprzedni Odniesienie do wydarzeń Dalej _

Przykład

Wykonaj JavaScript, gdy użytkownik zakończy przeciąganie elementu <p>:

Więcej przykładów „Wypróbuj sam” poniżej.

Definicja i użycie

Zdarzenie ondragend występuje, gdy użytkownik zakończy przeciąganie elementu lub zaznaczenia tekstu.

Przeciąganie i upuszczanie to bardzo powszechna funkcja w HTML5. Dzieje się tak, gdy „chwycisz” obiekt i przeciągniesz go w inne miejsce. Więcej informacji znajdziesz w naszym samouczku HTML dotyczącym przeciągania i upuszczania HTML5 .

Uwaga: aby umożliwić przeciąganie elementu, użyj globalnego atrybutu przeciągania HTML5.

Porada: Łącza i obrazy można domyślnie przeciągać i nie wymagają one atrybutu przeciągania.

Istnieje wiele zdarzeń, które są używane i mogą wystąpić na różnych etapach operacji przeciągania i upuszczania:

Zdarzenia uruchomione na przeciąganym celu (element źródłowy) :
- ondragstart - występuje, gdy użytkownik zaczyna przeciągać element
- ondrag - występuje, gdy element jest przeciągany
- ondragend - występuje, gdy użytkownik zakończy przeciąganie elementu

Zdarzenia wystrzeliwane na cel zrzutu:
- ondragenter - występuje, gdy przeciągany element wchodzi w cel upuszczania
- ondragover - występuje, gdy przeciągany element znajduje się nad celem upuszczania
- ondragleave - występuje, gdy przeciągany element opuszcza cel upuszczania
- ondrop - występuje, gdy przeciągany element jest upuszczany na cel upuszczania

Obsługa przeglądarki

Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje zdarzenie.

Event
ondragend	4.0	9.0	3.5	6.0	12.0

Składnia

W HTML:

<element ondragend="myScript">

W JavaScript:

object.ondragend = function(){myScript};

W JavaScript za pomocą metody addEventListener():

object.addEventListener("dragend", myScript);

Uwaga: Metoda addEventListener() nie jest obsługiwana w programie Internet Explorer 8 i wcześniejszych wersjach.

Szczegóły techniczne

Bąbelki:	tak
Możliwość anulowania:	Nie
Typ wydarzenia:	DragEvent
Obsługiwane tagi HTML:	Wszystkie elementy HTML
Wersja DOM:	Wydarzenia poziomu 3

Więcej przykładów

Przykład

Demonstracja WSZYSTKICH możliwych zdarzeń przeciągania i upuszczania:

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