ondragenter wydarzenie
Przykłady
Wykonanie JavaScript po przeciągnięciu elementu do docelowego upuszczania:
Spróbuj »
Dno tego artykułu zawiera więcej przykładów.
Definicja i Wykorzystanie
Ondragenter Zdarzenie gdy element lub przeciągnij zaznaczony tekst na poprawny cel upuszczenia.
ondragenter i ondragleave zdarzenia mogą pomóc użytkownikom lepiej zrozumieć przeciągane elementy wejść i wyjść z procesu strefy upuszczania. Można ustawić inny kolor tła, gdy element przeciągany wchodzi i opuszcza strefę zrzutu.
HTML5 Drag and Drop jest bardzo częstym elementem. Aby uzyskać więcej informacji, zobacz nasz poradnik HTML HTML5 przeciągnij i upuść .
Uwaga: Aby element przyciągany, trzeba użyć HTML5 przeciągany z nieruchomości.
Wskazówka: Linki domyślne i obrazy są przeciągane, bez atrybutu przeciągany.
Przeciągnij i upuść proces wywoła następujące zdarzenia:
- zdarzenie wyzwalające (Element źródłowy) na Drag docelowa:
- ondragstart - uruchamia się, gdy użytkownik rozpoczyna przeciąganie elementów
- ondrag - element przeciągane wyzwalania
- ondragend - wyzwalany gdy użytkownik zakończy element oporu
- Zwolnienie zdarzeń docelowej wyzwalania:
- ondragenter - To zdarzenie jest zwolniony, gdy mysz jest przeciągany obiekt w jego zasięgu pojemnika
- OnDragOver - To zdarzenie jest wywoływane, gdy obiekt zostanie przeciągnięty przeciągania obiektu kontenera w innym zakresie
- OnDragLeave - To zdarzenie jest zwolniony, gdy mysz jest przeciągany od obiektu w jego zasięgu pojemnika
- onDrop - w przeciąganie, zwolnij przycisk myszy, gdy wywoła to zdarzenie
Pomoc Browser
Wartości podane w tabeli przedstawiają pierwszą przeglądarką obsługującą tę wersję wydarzeń.
wydarzenie | |||||
---|---|---|---|---|---|
ondragenter | 4,0 | 9,0 | 3,5 | 6,0 | 12,0 |
gramatyka
W HTML:
W JavaScript:
JavaScript, należy użyć metody addEventListener ():
Uwaga: Internet Explorer 8 i wcześniejsze wersje IE nie obsługuje addEventListener () metody.
dane techniczne
Czy poprzeć bańki: | tak |
---|---|
Może być anulowane: | tak |
Typ zdarzenia: | DragEvent |
Obsługiwane znaczniki HTML: | Wszystkie elementy HTML |
Więcej przykładów
Przykłady
Poniższy przykład pokazuje wszystkich operacji przeciągania i upuszczania:
document.addEventListener ( "dragstart", function (event) {
//dataTransfer.setData () aby ustawić typ danych i ich przeciągania
event.dataTransfer.setData ( "Text", event.target.id);
// Wyjście jakiś tekst podczas przeciągania elementu p
. Document.getElementById ( "demo") innerHTML = "rozpocznij przeciąganie elementu p.";
// Modyfikuj przezroczystość elementu przeciągania
event.target.style.opacity = "0.4";
});
// P elementem przeciągnąć w tym samym czasie, zmienić kolor tekstu wyjściowego
document.addEventListener ( "drag", function (event) {
. Document.getElementById ( "demo") style.color = "red";
});
// Output End elementem p podczas przeciągania pewne elementy tekstowe i przywrócić przejrzystość
document.addEventListener ( "dragend", function (event) {
. Document.getElementById ( "demo") innerHTML = "complete p elementu przeciągnięcia";
event.target.style.opacity = "1";
});
/ * Po zakończeniu przeciągania wyzwalania * /
// Zakończenie elementu przeciągnięcia gdy p wprowadzić dropTarget, stylów obramowania zmienić div
document.addEventListener ( "dragenter", function (event) {
if (event.target.className == "dropTarget") {
event.target.style.border = "3px przerywana czerwone";
}
});
// Domyślnie dane / elementów nie można przeciągać i upuszczać w innych elementach. Do spadku Musimy zapobiec elementy domyślne przetwarzania
document.addEventListener ( "dragover", function (event) {
event.preventDefault ();
});
// Gdy przeciągnij i upuść elementy p zostawić dropTarget, reset div style obramowania
document.addEventListener ( "dragleave", function (event) {
if (event.target.className == "dropTarget") {
event.target.style.border = "";
}
});
/ * Do spadku, zapobiegać domyślną przeglądarkę przetwarzania danych (w linku rozwijanej jest domyślnie włączona)
Kasowanie Wyjście kolor ramki i kolor tekstu DIV
Użyj dataTransfer.getData () metoda zrzucane dane
element danych Mop id ( "drag1")
Dodatkowe elementy do elementu * / drag drop
document.addEventListener ( "drop", function (event) {
event.preventDefault ();
if (event.target.className == "dropTarget") {
document.getElementById ( "demo") style.color = ".";
event.target.style.border = "";
Dane var = event.dataTransfer.getData ( "Text");
event.target.appendChild (document.getElementById (dane));
}
});
Spróbuj »
Podobne strony
Kurs HTML: Drag and Drop HTML5
HTML Reference Manual: atrybutów HTML przeciągany z
obiekty zdarzeń