Przenoszenie HTML5

Przeciągnij obraz CodeW3C.com do prostokąta.

Przeciąganie

Przeciąganie (Drag i Drop) to bardzo powszechna funkcja. Oznacza to, że można coś złapać i przeciągnąć do innej pozycji.

Przeciąganie i upuszczanie jest częścią standardu HTML5: każdy element jest przeciągalny.

Obsługa przeglądarek

Liczby w tabeli wskazują na pierwszą wersję przeglądarki, która w pełni obsługuje przeciąganie i upuszczanie.

API
Przeciąganie 4.0 9.0 3.5 6.0 12.0

Przykład HTML przeciągania i upuszczania

Poniżej znajduje się prosty przykład dotyczący przeciągania i upuszczania:

Przykład

<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev) {
    ev.preventDefault();
}
function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>
</html>

Spróbuj sam

Może to wyglądać na skomplikowane, ale pozwól nam zbadać wszystkie różne części zdarzeń przeciągania.

Ustawienie elementu jako przeciągalnego

Najpierw: aby ustawić element jako przeciągalny, ustaw atrybut draggable na true:

<img draggable="true">

Zawartość przeciągania - ondragstart i setData()

Następnie, określ, co ma się zdarzyć, gdy element jest przeciągany.

W powyższym przykładzie, atrybut ondragstart wywołuje funkcję drag(event), która określa, jakie dane mają być przeciągane.

Metoda dataTransfer.setData() ustawia typ danych i wartość danych przeciąganego elementu:

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

W tym przykładzie, typ danych to "text", a wartość to id elementu przeciąganego ("drag1").

Gdzie upuścić - ondragover

Zdarzenie ondragover określa, gdzie mogą być umieszczone przeciągnięte dane.

Domyślnie, dane/elementy nie mogą być umieszczane w innych elementach. Aby umożliwić przeciąganie i upuszczanie, musimy zapobiec temu domyślnemu zachowaniu elementów.

Zadanie to jest realizowane przez metodę event.preventDefault() zdarzenia ondragover:

event.preventDefault()

Przesyłanie - ondrop

Wydarzenie drop wywołuje się, gdy uwalnia się przeciągnięte dane.

W powyższym przykładzie, atrybut ondrop wywołuje funkcję, drop(event):

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}

Wyjaśnienie kodu:

  • Wywołaj preventDefault() aby zapobiec domyślnemu przetwarzaniu danych przeglądarki (domyślnym zachowaniem dla zdarzenia drop jest otwarcie jako link)
  • Pobieranie danych przeciągniętych za pomocą metody getData() dataTransfer. Ta metoda zwróci dowolne dane ustawione w setData() w tym samym typie
  • Przeciągnięte dane to id elementu przeciąganego ("drag1")
  • Dodaj przeciągnięty element do umieszczonego elementu

Więcej przykładów

Przeciąganie obrazów

Jak przeciągać obraz między dwoma elementami <div>:

Przeciągnij obraz CodeW3C.com do prostokąta.

Spróbuj sam