Vyzkoušejte si nové drag and drop API ve Firefoxu 3.5

Jednou z novinek HTML5 je API pro drag & drop. Implementuje ho i nedávno vydaný Firefox 3.5. API nevzniklo na zelené louce, bylo vytvořeno dle implementace v Internet Exploreru a její kopie v Safari.

Pro implementaci drag & drop podle nového API již není třeba používat nízkoúrovňových událostí typu mousedown a mousemove, můžete sáhnout po událostech typu dragstart, dragend atd.

Demo

Výsledek si můžete ve Firefoxu 3.5 vyzkoušet na sadě ukázek.

Zdrojový kód je diskutovaný v článku HTML5 drag and drop in Firefox 3.5.

Připravil jsem i minimální kód potřebný pro zahájení drag & drop procesu.

Jelikož počet vývojářů, kteří používají nativní JavaScript klesá, klesá i význam téhle zprávy. Z událostí DOMu se pomalu stává cosi nenápadného, co se schovává kdesi dole pod frameworkem, který jejich obsluhu bezchybně zvládne.

I přesto je dobré minimálně vědět, že takové nové API existuje, abyste jednou nebyli překvapeni, a nepřemýšleli, kde se ta záhadná událost dragleave vlastně vzala.

Aktualizace

Vizionáře v oboru webových aplikací jistě nadchne fakt, že tento mechanismus funguje i napříč doménami, tj. můžete provádět drag & drop třeba mezi Emailem na Seznamu a Google Docs. A na těchto aplikacích pak záleží, zda se spolu dokáží domluvit.

Firefox implementuje drag & drop z HTML5

Poslední noční buildy Firefoxu obsahují podporu pro drag & drop z HTML5. Naprogramování drag & drop bylo dříve v prohlížečích poněkud komplikované (bylo nutné odchytávat události myši, detekovat, že uživatel chce s prvkem vůbec hýbat, vykreslovat jeho posunování a znovu detekovat, kam byl spuštěn).

Specifikace HTML5 obsahuje API, které je mnohem jednodušší. Rozhraní nenavrhli autoři specifikace, nýbrž vývojáři Internet Exploreru. Jedná se o další případ, kdy se HTML5 snaží standardizovat prohlížečem zavedené rozšíření. Nové rozhraní po Internet Exploreru implementovalo Safari a nyní došlo i na Firefox.

Rozhraní definuje nové události:

• drag
• dragstart
  
• dragenter
• dragleave
• dragover
• dragend
• drop

a řadu obslužných metod např. setDragImage nastaví obrázek, který bude uživateli zobrazovat, že právě "něco myší tahá".

Nedaří se mi najít najít žádné funkční demo, leda tento příklad, který nevím proč nefunguje. Navíc whatwg.org je dnes nedostupný (všichni zkouší nový prohlížeč od Googlu, chtějí testovat na acidtests.org a přetížili tak Hixieho server). Větší rozbor tedy necháme na jindy, zatím si můžete přečíst dokumentaci u Mozilly.

Aktualizace: Našel jsem příklad, který funguje (zatím alespoň v IE a Safari).

(Zdroj: Xulplanet.com)