W niniejszym artykule zajmę się implementacją funkcjonalności drag and drop w html5 canvas. Zaczniemy od stworzenia dokumentu html z elementem canvas. Pomiędzy znacznikami script zawrzemy cały skrypt.
Javascript
W miarę rozwoju internetu język javascript przeżywa dziś swoją drugą młodość. Coraz więcej aplikacji używa go do pobierania danych z serwera bez przeładowywania strony (Ajax). Z pobranych w ten sposób danych zwykle buduje się ciągi znaków i wstawia w odpowiednie miejsca w strukturze strony. Powoduje to często brak odseparowania danych od struktury. W php mamy np. systemy szablonów takie jak phptemplate czy Smarty, a w javascript... już mamy handlebars :) Handlebars to biblioteka napisana w javascript, która pozwala nam tworzyć szablony (na bazie Mustache).
W artykule pokażę kompleksowo (zarówno po stronie klienta jak i serwera) jak stworzyć za pomocą jquery UI sortable sortowalną listę elementów metodą drag and drop.
W artykule pokażę jak zintegrować mapę google maps z OpenStreetMap. W mapie google maps mamy do wyboru różne typy map np. hybrydowa, teren itp. Dodamy nowy typ OpenStreetMap, aby był dostępny z rozwijanego menu (patrz rysunek). Efekt jaki uzyskamy - demo.