ondragstart wydarzenie

Przykłady

Uruchom JavaScript w użytkownik rozpoczyna przeciąganie <p> element, gdy:

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

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

Definicja i Wykorzystanie

ondragstart zdarzenie jest wywoływane, gdy użytkownik uruchamia przeciągając element lub zaznaczonego tekstu.

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

Uwaga: Podczas przeciągania elementów, co 350 milisekund wyzwala onDragOver wydarzenie.

wydarzenie
ondragstart	4,0	9,0	3,5	6,0	12,0

gramatyka

W HTML:

<Elementondragstart = "myscript"> spróbować

W JavaScript:

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

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

object .addEventListener ( "dragstart" 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:	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:

/ * 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 »