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 złapać coś i przeciągnąć je 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 zbadajmy wszystkie różne części wydarzeń 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ę stać, gdy element jest przeciągany.

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

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

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

W tym przykładzie, typ danych to "text", a wartość to id elementu przeciągającego ("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 wdrożyć przeciąganie i upuszczenie, musimy zapobiec temu domyślnemu przetwarzaniu elementów.

Zadanie to wykonuje metoda preventDefault() zdarzenia ondragover:

event.preventDefault();

Przyłożenie - ondrop

Zdarzenie drop wywoływane jest, gdy uwalniamy 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 zdarzenia drop jest otwarcie jako link)
  • Pobierz przeciągnięte dane za pomocą metody getData() dataTransfer. Ta metoda zwróci dowolne dane ustawione w setData() jako ten sam typ
  • Przeciągnięte dane to id elementu przeciąganego ("drag1")
  • Dodaj przeciągnięty element do umieszczanego 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