z HTML5 je možné přetáhnout HTML prvky uvnitř HTML stránky. Prostřednictvím JavaScript posluchačů událostí se můžete rozhodnout, co se stane, když uživatel přetáhne a klesne prvky.
během drag and drop HTML elements může mít dvě role:
- Draggable
- Drop target / drop zone.
přetáhnout prvek je prvek, který uživatel by měl být schopen táhnout kolem HTML stránku a umístěte někam, na nějakou akci dojde. Může to být jeden nebo více prvků.,
drop target nebo drop zone je prvek, na který jsou přetažitelné prvky upuštěny.
Drag and Drop Události
kontrolovat, co se stane, když přetažením prvky HTML, musíte provést 3 kroky:
- Nastavení HTML prvky přetáhnout.,
- Připojit posluchače událostí k přetáhnout prvky HTML
- Připojit posluchače událostí do cíl přetažení HTML prvky
akce a atributy jsou uvedeny zde:
Nejprve musíte nastavit draggable="true" atribut na elementu HTML(s), aby se přetáhnout.
Druhý připojit posluchače událostí na přetáhnout prvek dragstart dragend události., Uvnitř těchto posluchačů událostí můžete implementovat, co se má stát, když uživatel začne přetahovat prvek a když tažení skončí.
třetí připojíte posluchače událostí na cílový prvek drop. Události si můžete poslechnout na dragenter dragover dragleave drop.
dragenter událost je aktivována, když uživatel přetáhne přetáhnout na cíl pro upuštění., Tato událost se spustí pouze tehdy, když se tažný prvek změní z vnější strany na konec, což je obvykle určeno polohou kurzoru myši.
Jakmile je přetáhnout prvek je nad cíl přetažení, dragover událost nastane, a dál střílet tak dlouho, jak přetáhnout prvek je vlečen za cíl přetažení.
Pokud uživatel táhne přetáhnout objekt z drop cíl znovu, dragleave událost je aktivována.
Pokud uživatel kapky přetáhnout objekt na cíl přetažení, drop událost je aktivována.,
Drag and Drop příklad události
zde je příklad, se kterým můžete hrát. Pokuste se přetáhnout logo HTML5 na cílový cíl a zjistit, co se stane. Zkuste oba upustit obraz a přetáhnout ho znovu.
dragend:
dragenter:
dragover:
dragleave:
drop:
Drag and Drop Kód
Pojďme se podívat na to, jak zvládnout drag and drop akce., Abychom viděli, že nejprve vytvoříme<img> prvek, který můžeme přetáhnout. Zde je HTML kód pro to:
<img src="http://tutorials.jenkov.com/html5/..." draggable="true">
jakmile máme draggable prvek potřebujeme drop cíl. Budu používat <div> element:
<div style="width: 200px; height: 200px;">Drop here</div>
Jakmile budeme mít přetáhnout prvek a cíl přetažení prvku, musíme připojit posluchače událostí., Zde je kód JavaScript pro to, že:
dragStart() volání funkce event.dataTransfer.setData() s cílem nastavit data, která je převedena na cíl přetažení, když prvek je zrušen. Bez ohledu na data, která potřebujete k řádnému dokončení akce drop, nastavte ji zde. Nastavíte data i typ mime.
přetažení () adrop() manipulátory událostí volají event.preventDefault() a vrátí false. To je nezbytné, aby drag and drop fungoval správně., Prohlížeč může mít nějaké výchozí drag and drop chování, které je třeba zakázat, aby váš kód fungoval.
Všimněte si také, že drop() události funkce čte data nastavit v dragStart() pomocí volání event.dataTransfer.getData(). Předává mime typ dat jako parametr, aby jej správně extrahoval.
to je vše, co je potřeba k implementaci drag and drop v HTML5. Můžete to udělat trochu vizuálně příjemnější, jak uvidíme v další části.,
Vizuální zpětná vazba
funkce nástroje pro správu událostí drag and drop můžete uživateli poskytnout jasnější vizuální zpětnou vazbu.
nejprve můžete označit tažený prvek tak, aby uživatel viděl, který prvek se táhne. Pokud více prvků vypadá stejně a všechny je lze přetáhnout, je příjemné, aby uživatel zjistil, který z nich je tažen. Můžete tak učinit v reakci na událostdragstart. Zde je příklad:
jakmile drag skončí, chceme ohraničení znovu odstranit., To se provádí v reakci na událostdragend. Zde je návod, jak se to dělá:
nyní uživatel získá vizuální zpětnou vazbu, která ukazuje, který prvek je tažen.
chceme také ukázat uživateli, že je možné přetáhnout tažný prvek, když je přetažen přes cílový cíl. Opět změníme hranici prvku. Uděláme to v reakci na události dragenter, dragleave a drop., Takto se to dělá:
nyní se hranice drop target stane zelenou a přerušovanou, když je přetažitelný prvek přetažen. Ohraničení bude odstraněno, když je tažný prvek znovu vytažen, nebo pokud je prvek upuštěn na cílový pokles.
výše uvedený příklad neprokázalo dragOver() události funkce, ale ujistěte se, že jste jej přidat, aby se zabránilo výchozí chování prohlížeče.,
Zde je kompletní kód, po vizuální zpětná vazba byla přidána:
DataTransfer Objektu, effectsAllowed, dropEffect a setDragImage()
můžete zvýšit vizuální zpětnou vazbu pro uživatele během drag and drop akce pomocí DataTransfer objekt. Objekt DataTransfer má 2 atributy a jednu funkci, kterou můžete pro tento účel použít., Jsou to:
- effectsAllowed
- dropEffect
- setDragImage()
máte přístup do DataTransfer objekt v dragstart drop akce objektů. Zde je příklad dragstart listener funkci, která nastaví effectsAllowed vlastnost DataTransfer předmět:
effectsAllowed majetek je používán pro prohlížeče, změnit kurzor myši ukázat, jaký druh akce se provádí, když přetažením prvku., Kurzor myši se obvykle změní, když je tažený prvek nad cílovým poklesem. Předtím ne. Platné hodnoty pro effectsAllowed majetku jsou:
- žádná
- kopírovat
- pohyb
- copyMove
- odkaz
- linkMove
- kopírování odkazu
- všechny
- neinicializované
dropEffect má ukázat uživateli (pomocí kurzoru) co se stane, když se myš přesune nad cíl přetažení, ale v době psaní (únor. 2014) zdá se, že prohlížeče to ignorují., Platné hodnoty pro dropEffect ubytování:
- žádná
- kopírovat
- odkaz
- pohyb
setDragImage(image, x, y) funkce lze nastavit obraz se zobrazí v prohlížeči, když uživatel přesune prvek. Ve výchozím nastavení prohlížeč zobrazuje poloprůhlednou kopii původního prvku, ale pokud chcete jiný obrázek, můžete pomocí této funkce nastavit jiný obrázek. x ay vlastnosti lze použít k nastavení umístění offsets pro obraz, když se zobrazí., Ve výchozím nastavení je levý horní roh obrázku drag umístěn na špičce ukazatele myši. Nastavením různých vlastností x a y to můžete změnit. Můžete použít buď pozitivní nebo negativní x a y offsety.
Zde je příklad kódu ukazuje, jak nastavit přetáhněte obraz uvnitř dragStart() event listener funkce:
Zde je příklad, který vám umožní hrát s různými nastavení na DataTransfer objekt., Zkuste změnit effectsAllowed a přetáhněte obrázek a uvidíte, co se stane, když přetáhnete logo HTML5 dolů přes div drop target.
Přetažením Souborů Do Prohlížeče
je možné přetahovat soubory do prohlížeče ze systému souborů, a přečtěte si název a obsah přetáhnout soubory z Javascriptu. Učiníte tak prostřednictvím HTML5 File API., Zde je cílový posluchač drop, který detekuje název souboru přetaženého souboru:
var droptarget2 = document.getElementById("droptarget2");droptarget2.addEventListener("drop" , drop , false);function drop(event) { // Files - array of dragged files. var files = event.dataTransfer.files; for(var i= 0; i Notice how the
function does not call the function, but instead accesses the property of the . The property contains a list of the files that were dragged into the browser. To learn how to read these files, consult the HTML5 File API (I will write about it soon). You can read more about how to access the dragged files in my HTML5 file API tutorial.