Již dlouho existují funkce jazyka JavaScript, které nám umožňují vytvářet rozhraní pro přetažení, ale žádná z těchto implementací nebyla pro prohlížeč natívná.
V jazyce HTML5 máme nativní metodu vytváření rozhraní pro přetažení (s malou pomocí JavaScript).
Chystám se vám dovolit, jak toho dosáhnout ...
Chtěl bych to vynechat předtím, než pokročíme: v současné době je drag and drop HTML5 podporován všemi hlavními prohlížeči (včetně IE (i IE 5.5 má částečnou podporu)), ale v současné době není podporován žádným populárním mobilním prohlížečem prohlížeče.
V každé fázi operace drag and drop se vypálí jiná událost, takže prohlížeč ví, jaký kód JavaScript má provést; události jsou:
Se všemi těmito posluchači událostí máte spoustu kontroly nad tím, jak funguje vaše rozhraní a přesně jak to funguje za různých okolností.
Toto je místo, kde se všechny kouzla drag and drop stane; tento objekt uchovává data, která byla odeslána operací drag. Data lze nastavit a vyhledávat různými způsoby, z nichž nejdůležitější jsou:
Teď začneme vytvářet naše jednoduchý drag and drop příklad, můžete vidět, že máme dvě malé divy a větší, můžeme přetáhnout ty malé do velké a můžeme je dokonce přesunout zpátky.
První věc, kterou musíme udělat, je vytvoření našeho HTML. Děláme divy, které jsou dramaticky přemístitelné, jako:
draggable="true">Když to bude hotovo, musíme definovat funkci javascript, která se spustí, když začneme přetahovat tento prvek:
function dragStart(ev) {ev.dataTransfer.effectAllowed='move';ev.dataTransfer.setData("Text", ev.target.getAttribute('id')); ev.dataTransfer.setDragImage(ev.target,100,100);return true;}V tomto kódu nejprve deklarujeme, jaký typ efektu povolíme v operaci a nastavíme, aby se přesunul, ve druhém řádku nastavíme data operace a v tomto případě je text Text a hodnota je ID prvku jsme tažení. Poté použijeme metodu setDragImage, abychom nastavili, co budeme přetahovat, a pak tam, kde bude kurzor přetahovat, a protože kostky jsou 200 x 200 pixelů, umístím to právě v centru. Nakonec se vrátíme pravdu.
Aby element mohl přijmout kapku, musí poslouchat 3 různé události: dragEnter, dragOver a také událost drop, tak to přidáme do našeho html v divu s ID velkého:
Nyní, když jsme přidali posluchače událostí, musíme tyto funkce vytvořit, začneme tím,
function dragEnter(ev) {ev.preventDefault();return true;}function dragOver(ev) {ev.preventDefault();}V první funkci definujeme, co chceme, když element, který my přetahujeme, dosáhne elementu, který má být propuštěn, v tomto případě zabraňujeme pouze výchozímu chování prohlížeče, ale můžete udělat libovolný počet věcí, jako je změna pozadí nebo přidat nějaký text, který naznačuje, že uživatel přitahuje do správné oblasti a pomocí události dragleave můžete vrátit změny, které jste provedli. Dále ve funkci dragOver jednoduše zabráníme tomu, že výchozí nastavení umožní pokles.
Následující část definuje funkci, kdy vlastnost skutečně klesne na požadovaný cíl:
function dragDrop(ev) {var data = ev.dataTransfer.getData("Text");ev.target.appendChild(document.getElementById(data));ev.stopPropagation();return false;}V této poslední části nejprve nastavíme proměnnou nazvanou data, ve které získáme všechna data, která jsou k dispozici pro textový formát, a pak přidáme tato data (což bude element, který přetahujeme) do div, kde chceme vypadnout prvku. Konečně se konečně dotýká zastavení šíření a návratu falešného.
Kontrola demo , můžete vidět, že jsme se také ujistili, že dvě divy mohou být přetahovány zpět do původní polohy. Naštěstí přidání dalšího cíle může být jednodušší, než si myslíte; protože funkce jsou již na místě, stačí jen přidat posluchače události, například:
A to je vše, co potřebujeme, abychom umožnili přetahování divů na původní místo.
Existuje spousta aplikací s přetažením postavených pomocí knihoven JavaScript a je často jednodušší používat tyto knihovny. Doufám, že v této technice HTML5 a JavaScript vidíte budoucí potenciál nativního řešení.
Vytvořili jste rozhraní pro přetažení? Jak se nativní HTML5 porovná s čistým řešením JavaScript? Dejte nám vědět v komentářích.