Kurs HTML5. Część 5: mechanizm przeciągnij i upuść, tryb offline i geolokalizacja

Z poprzednich części kursu dowiedziałeś się między innymi, jak przygotować środowisko programistyczne i testowe, stosować tag <aside>, pole formularzy <color>, rysować na płótnie canvas i dodać do strony film i dźwięk. Z tej części kursu dowiesz się, jak korzystać z mechanizmu przeciągnij i upuść, trybu offline i geolokalizacji.

Spis treści

Mechanizm przeciągnij i upuść

Mechanizm przeciągnij i upuść ostatnio staje się widoczny w Sieci, szczególnie od momentu, w którym niektóre strony pozwalają wgrywać zdjęcia, przeciągając je z dysku do obszaru w oknie przeglądarki. Umożliwia to właśnie mechanizm „drag and drop" znajdujący się w HTML5.

Omawiane do tej pory nowości w HTML5 działają całkiem dobrze w popularnych przeglądarkach. Z mechanizmem przeciągnij i upuść jest zupełnie inaczej. Mechanizm drag and drop był znany już od dawna użytkownikom Internet Explorera - to właśnie na jego bazie powstała specyfikacja znajdująca się w HTML5.

Jednak przeglądarki z serii Internet Explorer nie wspierają jeszcze poprawnie mechanizmu drag and drop w stylu przedstawionym w dokumentacji HTML5, chociaż IE 10 ma już go wspierać. Google Chrome, Safari i Opera również słabo radzą sobie z obsługą mechanizmu. Dlatego na ten moment nie polecam stosowania tego mechanizmu. Jest jeszcze za wcześnie na jakieś praktyczne zastosowania. Obecnie lepiej skorzystać z gotowych rozwiązań, które obsługują wszystkie wyjątki i wyjątki od wyjątków.

Podczas pisania tego rozdziału zastanawiałem się, czy przedstawić kod najeżony obejściami różnych problemów, jakie powodują przeglądarki. Jednak w trakcie prac nad rozdziałem okazało się, że stałby się on wówczas raczej opisem sztuczek, zamiast wykorzystania standardu, a Czytelnicy, jak sądzę, oczekują opisu HTML5 jako standardu.

Dlatego też przedstawię wersję zgodną ze specyfikacją. Jeśli chcesz testować przedstawione przykłady, polecam Firefoksa, który wspiera mechanizm najlepiej. Można też wypróbować Chrome, ale tam mogą wystąpić problemy. Innych przeglądarek lepiej nie dotykać.

«poprzednia 1 2 3 4 ... 6 następna »

Podoba Ci się ten tekst? Powiedz o tym innym na Fb: lub na G+:

publikuj:

wydrukuj

6 skomentuj »

Komentarze

#1 Bastian 2012-02-13 14:32:20 0
Fajny artykuł, jedna z moich ulubionych serii na tym portalu. Zastanawia mnie tylko dlaczego jest takie rozjechane formatowanie, i nie wszystko poprawną polszczyzną?
IP: 87.205.69.[...] Mozilla/5.0 (X11; Linux i686; rv:7.0.1) Gecko/20100101 Firefox/7.0.1
#2 dAREuS^® 2012-02-13 14:46:50 0
Zaraz wywalimy kursywę. Jeśli chodzi o usterki, to proszę o konkrety.
IP: 83.8.26.[...] Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/535.20 (KHTML, like Gecko) Chrome/19.0.1036.7 Safari/535.20
#3 Awass 2012-02-14 10:57:57 0
brakuje nawiasu na koncu

map.setCenter(new OpenLayers.LonLat(dlugosc, szerokosc));
IP: 217.153.217.[...] Mozilla/5.0 (Windows NT 6.1; WOW64; rv:10.0.1) Gecko/20100101 Firefox/10.0.1
#4 dav 2012-02-22 11:45:32 0
Dajcie działajace przyklady, a nie jakies obrazki. Przeciez to kurs html!
IP: 194.187.52.[...] Mozilla/5.0 (Linux; U; Android 3.1; pl-pl; GT-P7310 Build/HMJ37) AppleWebKit/534.13 (KHTML, like Gecko) Version/4.0 Safari/534.13
#5 tty 2012-03-14 14:15:00 0
szkoda ze nigdzie nie ma odnosnikow do czesci poprzednich
IP: 63.115.56.[...] Mozilla/5.0 (Windows NT 6.1; rv:10.0.2) Gecko/20100101 Firefox/10.0.2
#6 dAREuS^® 2012-03-14 14:26:40 0
W tabelce na początku są wszystkie odniesienia.
IP: 178.180.182.[...] Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/536.3 (KHTML, like Gecko) Chrome/19.0.1061.1 Safari/536.3

Aby dodać komentarz, musisz podać swój nick, treść komentarza oraz poprawnie przepisać oba słowa z obrazka (słowa muszą być rozdzielone spacją).
W treści komentarza można używać języka formatowania BBcode.