HTML Drag and Drop API
V HTML lze přetáhnout jakýkoli prvek.
Příklad
Přetáhněte obrázek W3Schools do obdélníku.
Drag and Drop
Drag and drop je velmi běžná funkce. Je to, když "chytíte" objekt a přetáhnete jej na jiné místo.
Podpora prohlížeče
Čísla v tabulce udávají první verzi prohlížeče, která plně podporuje Drag and Drop.
| API | |||||
|---|---|---|---|---|---|
| Drag and Drop | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
Příklad HTML Drag and Drop
Níže uvedený příklad je jednoduchý příklad přetažení:
Příklad
<!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>
Může se to zdát komplikované, ale pojďme si projít všechny různé části události přetažení.
Udělejte prvek přetahovatelným
Za prvé: Chcete-li, aby byl prvek přetahovatelný, nastavte draggableatribut na true:
<img draggable="true">
Co přetáhnout - ondragstart a setData()
Poté určete, co se má stát při přetažení prvku.
Ve výše uvedeném příkladu ondragstartatribut volá funkci drag(event), která určuje, jaká data se mají přetáhnout.
Metoda dataTransfer.setData()nastavuje datový typ a hodnotu přetažených dat:
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
V tomto případě je datovým typem "text" a hodnotou je id přetahovatelného prvku ("drag1").
Kam zahodit - ondragover
Událost ondragoverurčuje, kam mohou být přetažená data vypuštěna.
Ve výchozím nastavení nelze data/prvky vypustit v jiných prvcích. Abychom povolili pokles, musíme zabránit výchozí manipulaci s prvkem.
To se provádí voláním event.preventDefault()metody pro událost ondragover:
event.preventDefault()
Do the Drop - ondrop
Když jsou přetažená data vypuštěna, dojde k události drop.
Ve výše uvedeném příkladu volá atribut ondrop funkci drop(event):
function drop(ev)
{
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
Vysvětlení kódu:
- Zavolejte preventDefault(), abyste zabránili výchozímu zpracování dat prohlížečem (výchozí nastavení je otevřeno jako odkaz při přetažení)
- Získejte přetažená data pomocí metody dataTransfer.getData(). Tato metoda vrátí všechna data, která byla v metodě setData() nastavena na stejný typ
- Přetažená data jsou id přetaženého prvku ("drag1")
- Připojte přetažený prvek do prvku drop
Další příklady
Příklad
Jak přetáhnout (a pustit) obrázek tam a zpět mezi dva prvky <div>: