Zdarzenie ondragend
Definicja i użycie
Kiedy użytkownik ukończy przeciągnięcie elementu lub tekst wybór, zdarzenie ondragend ma miejsce.
Przeciąganie i upuszczanie to bardzo powszechna funkcja w HTML5. Oznacza to, że gdy "chwytasz" obiekt i przeciągasz go do innej pozycji. Aby dowiedzieć się więcej, przeczytaj nasze informacje o Przenoszenie HTML5HTML tutorial.
Komentarz:Aby uczynić element przeciągalnym, użyj globalnego Atrybut draggable HTML5。
Wskazówka:Domyślnie, linki i obrazy są przeciągane, nie wymaga się atrybutu draggable.
W różnych fazach operacji przeciągania i upuszczania używanych jest wiele zdarzeń i może się zdarzyć:
Zdarzenia wywoływane na celu przeciągnięcia (element źródłowy):
- ondragstart - gdy użytkownik zaczyna przeciągać element
- ondrag - gdy element jest przeciągany
- ondragend - gdy użytkownik ukończy przeciągnięcie elementu
Zdarzenia wywoływane na celu umieszczenia:
- ondragenter - gdy przeciągany element wchodzi w cel umieszczenia
- ondragover - gdy przeciągany element znajduje się na celu umieszczenia
- ondragleave - gdy przeciągany element odchodzi od celu umieszczenia
- ondrop - gdy przeciągany element zostaje umieszczony na celu umieszczenia
Przykład
Kiedy użytkownik ukończy przeciągnięcie elementu <p>, wykonaj JavaScript:
<p draggable="true" ondragend="myFunction(event)">Przeciągnij mnie!</p>
Poniżej znajdują się więcej przykładów TIY.
Gramatyka
W HTML:
<element ondragend="myScript">
W JavaScript:
obiekt.ondragend = function() {myScript};
W JavaScript, używając metody addEventListener():
obiekt.addEventListener("dragend", myScript);
Komentarz:Internet Explorer 8 lub wcześniejsze wersje nie obsługują Metoda addEventListener()。
Szczegóły techniczne
| Bąbelkowanie: | Obsługiwane |
|---|---|
| Można anulować: | Nieobsługiwane |
| Typ wydarzenia: | DragEvent |
| Wspierane znaczniki HTML: | Wszystkie elementy HTML |
| Wersja DOM: | Wydarzenia poziomu 3 |
Wsparcie przeglądarki
Numer w tabeli oznacza pierwszą wersję przeglądarki, która w pełni obsługuje to wydarzenie.
| wydarzenia | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| ondragend | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
Więcej przykładów
Prezentacja wszystkich możliwych wydarzeń przeciągania i upuszczania:
<p draggable="true" id="dragtarget">Przeciągnij mnie!</p>
<div class="droptarget">Upuść tutaj!</div>
<script>
/* ----------------- Wydarzenia wywoływane na celu przeciągania ----------------- */
document.addEventListener("dragstart", function(event) {
// Metoda dataTransfer.setData() ustawia typ i wartość danych przeciąganego elementu
event.dataTransfer.setData("Text", event.target.id);
// Wyświetl tekst podczas rozpoczynania przeciągania elementu p
document.getElementById("demo").innerHTML = "Rozpoczęto przeciąganie elementu p.";
// Zmień przezroczystość przeciąganych elementów
event.target.style.opacity = "0.4";
});
// Zmień kolor wyświetlanego tekstu podczas przeciągania elementu p
document.addEventListener("drag", function(event) {
document.getElementById("demo").style.color = "red";
});
// Po zakończeniu przeciągania elementu p wyświetl tekst i zresetuj przezroczystość
document.addEventListener("dragend", function(event) {
document.getElementById("demo").innerHTML = "Zakończono przeciąganie elementu p.";
event.target.style.opacity = "1";
});
/* ----------------- Events triggered on the drop target ----------------- */
// When the draggable p element enters the droptarget, change the border style of the DIV
document.addEventListener("dragenter", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "3px dotted red";
}
});
// By default, data/elements cannot be placed in other elements. To allow placement, 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 border style of the DIV
document.addEventListener("dragleave", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "";
}
});
/* On drop - prevent the browser's default handling of data (default opening as a link when dropped)
Reset the color of the output text and the border color of the DIV
Use the dataTransfer.getData() method to get the drag data
The dragged data is the id of the dragged element ("drag1")
Attach the draggable element to 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>
