Zdarzenie ondrag
Definicja i użycie
Wydarzenie ondrag ma miejsce, gdy element lub wybór tekstu jest przeciągany.
Przeciąganie i upuszczanie to bardzo powszechna funkcja w HTML5. Oznacza to, że gdy "przechwytywasz" obiekt i przeciągasz go do innej pozycji. Aby dowiedzieć się więcej, przeczytaj nasze informacje o Przenoszenie HTML5HTML tutorialu.
Uwaga：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 etapach operacji przeciągania i upuszczania używane jest wiele zdarzeń i mogą wystąpić:
Wydarzenia wywoływane na celu przeciągania (element źródłowy):
- ondragstart - Wydarzenie to ma miejsce, gdy użytkownik rozpocznie przeciągnięcie elementu.
- ondrag - Wydarzenie to ma miejsce, gdy element jest przeciągany.
- ondragend - Wydarzenie to ma miejsce, gdy użytkownik ukończy przeciągnięcie elementu.
Wydarzenia wywoływane na celu umieszczenia:
- ondragenter - Wydarzenie to ma miejsce, gdy przeciągany element wchodzi w cel umieszczenia.
- ondragover - Wydarzenie to ma miejsce, gdy przeciągany element znajduje się na celu umieszczenia.
- ondragleave - Wydarzenie to ma miejsce, gdy przeciągany element odchodzi od celu umieszczenia.
- ondrop - Wydarzenie to ma miejsce, gdy przeciągany element jest umieszczony na celu umieszczenia.
Uwaga：Gdy przeciągasz element, zdarzenie ondrag wywoływane jest co 350 milisekund.
Przykład
Wykonaj JavaScript, gdy przeciągasz element <p>:
<p draggable="true" ondrag="myFunction(event)">Przeciągnij mnie!</p>
Poniżej znajdują się więcej przykładów TIY.
Gramatyka
W HTML:
<element ondrag="myScript">
W JavaScript:
obiekt.ondrag = function(){myScript};
W JavaScript, używając metody addEventListener():
obiekt.addEventListener("drag", myScript);
Uwaga：Internet Explorer 8 lub wcześniejsze wersje nie obsługują metoda addEventListener().
Szczegóły techniczne
| Bąbelkowanie: | Obsługiwane |
|---|---|
| Można anulować: | Obsługiwane |
| Typ wydarzenia: | DragEvent |
| Obsługiwane etykiety HTML: | Wszystkie elementy HTML |
| Wersja DOM: | Wydarzenia poziomu 3 |
Wsparcie przeglądarki
Liczby w tabeli wskazują na pierwszą wersję przeglądarki, która w pełni obsługuje to wydarzenie.
| wydarzenia | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| ondrag | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
Więcej przykładów
Pokaz wszystkich możliwych wydarzeń przeciągania i upuszczania:
<p draggable="true" id="dragtarget">Przeciągnij mnie!</p>
<div class="droptarget">Spuść 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 kilka tekstów podczas rozpoczynania przeciągania elementu p
document.getElementById("demo").innerHTML = "Rozpoczęto przeciąganie elementu p.";
// Zmień nieprzejrzystość 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 kilka tekstów i przywróć nieprzejrzystość
document.addEventListener("dragend", function(event) {
document.getElementById("demo").innerHTML = "Zakończono przeciąganie elementu p.";
event.target.style.opacity = "1";
});
/* ----------------- Wydarzenia wywoływane na celu umieszczenia ----------------- */
// Gdy element p, który można przeciągać, wchodzi do droptarget, zmień styl ramki DIV
document.addEventListener("dragenter", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "3px dotted red";
}
});
// Domyślnie, nie można umieszczać danych/elementów w innych elementach. Aby umożliwić umieszczanie, musimy zablokować domyślne przetwarzanie elementu
document.addEventListener("dragover", function(event) {
event.preventDefault();
});
// Gdy element p, który można przeciągać, opuszcza droptarget, przywróć styl ramki DIV
document.addEventListener("dragleave", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "";
}
});
/* Po upuszczeniu - zapobiegaj domyślnemu przetwarzaniu danych przez przeglądarkę (domyślne umieszczanie jako linki)
Przywróć kolor tekstu i kolor ramki DIV
Użyj metody dataTransfer.getData() do uzyskania przeciągniętych danych
Przeciągnięte dane to identyfikator elementu ("drag1")
Dołącz element, który jest przeciągany, do elementu docelowego
*/
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>
