ondragend wydarzenie

Przykłady

JavaScript jest wykonywane, gdy użytkownik zakończy <p> Element Przeciąganie:

<P przeciągany = "true" ondragend = "myFunction (event)"> przeciągnąć mnie! </ P>

Dno tego artykułu zawiera więcej przykładów.

Definicja i Wykorzystanie

Ondragend Zdarzenie gdy element przeciągania ukończone lub w korzystnych tekst użytkownika.

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
ondragend	4,0	9,0	3,5	6,0	12,0

gramatyka

W HTML:

<Elementondragend = "myscript"> spróbować

W JavaScript:

Obiekt .ondragend = function () {myscript }; spróbuj

JavaScript, należy użyć metody addEventListener ():

object .addEventListener ( "dragend" MOJSKRYPT ); spróbuj

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

/ * Gdy opór spustu * /
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 »