API przeciągania i upuszczania HTML
W HTML każdy element można przeciągać i upuszczać.
Przykład
Przeciągnij obraz W3Schools do prostokąta.
Przeciągnij i upuść
Przeciąganie i upuszczanie to bardzo powszechna funkcja. Dzieje się tak, gdy „chwycisz” obiekt i przeciągniesz go w inne miejsce.
Obsługa przeglądarki
Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje funkcję przeciągania i upuszczania.
| API | |||||
|---|---|---|---|---|---|
| Drag and Drop | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
Przykład przeciągania i upuszczania HTML
Poniższy przykład to prosty przykład 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>
Może się to wydawać skomplikowane, ale przejdźmy przez wszystkie różne części zdarzenia przeciągnij i upuść.
Spraw, aby element był przeciągany
Po pierwsze: aby element był przeciągany, ustaw draggableatrybut na true:
<img draggable="true">
Co przeciągnąć — ondragstart i setData()
Następnie określ, co ma się stać, gdy element zostanie przeciągnięty.
W powyższym przykładzie ondragstartatrybut wywołuje funkcję drag(event), która określa, jakie dane mają być przeciągane.
Metoda dataTransfer.setData()ustawia typ danych i wartość przeciąganych danych:
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
W tym przypadku typem danych jest „text”, a wartością jest identyfikator elementu, który można przeciągać („drag1”).
Gdzie upuścić - ondragover
Zdarzenie ondragoverokreśla, gdzie można upuścić przeciągane dane.
Domyślnie danych/elementów nie można usunąć w innych elementach. Aby zezwolić na upuszczenie, musimy uniemożliwić domyślną obsługę elementu.
Odbywa się to poprzez wywołanie event.preventDefault()metody dla zdarzenia ondragover:
event.preventDefault()
Zrób upuszczenie - ondrop
Po upuszczeniu przeciąganych danych następuje zdarzenie upuszczenia.
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 uniemożliwić domyślną obsługę danych przez przeglądarkę (domyślnie jest to otwierane jako łącze przy upuszczaniu)
- Pobierz przeciągnięte dane za pomocą metody dataTransfer.getData(). Ta metoda zwróci wszystkie dane, które zostały ustawione na ten sam typ w metodzie setData()
- Przeciągane dane to identyfikator przeciąganego elementu ("drag1")
- Dołącz przeciągnięty element do elementu upuszczanego
Więcej przykładów
Przykład
Jak przeciągać (i upuszczać) obraz tam iz powrotem między dwoma elementami <div>: