Najlepszy samouczek HTML5 Drag and Drop W 2024 r. W tym samouczku możesz dowiedzieć się Przeciągnij i upuść,Pomoc Browser,HTML5 przeciągnij i upuść Przykłady,Przykłady,Element jest ustawiony do spadku,Przeciągnij Co - ondragstart i SetData (),Gdzie umieścić - onDragOver,Zostać umieszczone - ondrop,Więcej przykładów,
Przeciągnij i upuść (drag and drop) jest częścią standardu HTML5.
W3cschool ikonę i przeciągnij go do prostokąta.
Przeciągnij i upuść jest cechą, która jest pełzać na innym miejscu po obiekcie.
W HTML5, przeciągnij i upuść jest standardową częścią każdego elementu można przeciągać i upuszczać.
Internet Explorer 9+, Firefox, Opera, Chrome i Safari obsługa drag.
Uwaga: Safari 5.1.2 nie obsługuje przeciągania.
Poniższy przykład jest prosty przeciągnij i upuść Przykład:
To może wydawać się nieco skomplikowane, ale udało nam się uczyć różnych części przeciągnij i upuść zdarzenia.
Po pierwsze, w celu uczynienia element przyciągany, ustawić atrybut Draggable true:
Wtedy, gdy element jest przeciągany przewidzieć, co się wydarzy.
W powyższym przykładzie, ondragstart atrybutem wywołuje funkcję przeciągnij (zdarzenia), który definiuje dane przeciągane.
dataTransfer.setData () aby ustawić typ danych i wartość holowana dane:
W tym przykładzie, typ danych jest "Tekst", wartość jest przeciągany id elementu ( "drag1").
onDragOver zdarzenie określone gdzie umieścić dane przeciągane.
Domyślnie nie można umieszczać dane / elementy do innych elementów. Jeśli trzeba skonfigurować pozwala na miejsce, musimy uniemożliwić manipulację domyślnego elementu.
Można to zrobić dzwoniąc onDragOver event.preventDefault zdarzeń () Metoda:
Po umieszczeniu przeciągane dane, spadek zdarzenie.
W powyższym przykładzie, ondrop atrybutem wywołuje funkcję, drop (zdarzenia):
Kod wyjaśnienie:
Przeciągnij i upuść obraz tam iz powrotem
Jak przeciągać i upuszczać obrazy między dwoma <div> elementów.