Kursor -moz-grab dla każdej przeglądarki

Mozilla wdrożyła w swojej przeglądarce Firefox dodatkowe kursory - np. -moz-grab. Jest to standardowy kursor przypisany (w systemach operacyjnych) do obsługi zdarzenia drag'n'drop. Jako, że do czasu HTML5 zdarzenie to nie było oficjalnie wspierane przez przeglądarki, więc i obsługa wyglądu nie była potrzebna. A co zrobić w momencie, kiedy wykorzystujemy jQuery UI lub wspomniany HTML5 i chcemy udostępnić użytkownikowi kursory znane z jego systemu operacyjnego?

Firefox posiada wbudowany styl -moz-grab, wówczas implementacja tego rozwiązania jest banalna.

.drag {
   cursor: -moz-grab;
}
.ondrag {
   cursor: -moz-grabbing;
}

A co z resztą przeglądarek? Google przygotowując mapy także korzysta z tych kursorów i są one dostępne pod adresami:

• -moz-grab - http://www.google.com/intl/en_ALL/mapfiles/openhand.cur
• -moz-grabbing - http://www.google.com/intl/en_ALL/mapfiles/closedhand.cur

Ponieważ CSS2.1 definiuje, że zapis url w stylach ma pierwszeństwo przed predefiniowanymi kursorami, więc niestety musimy przenieść definicję -moz-grab i -moz-grabbing na koniec - co zadziała dopiero jak Google się zbuntuje i nie udostępni nam swojego kursora. Może to też być dobra mobilizacja do wrzucenia kursora na swój serwer.

.drag {
   cursor: url(http://www.google.com/intl/en_ALL/mapfiles/openhand.cur), -moz-grab;
}
.ondrag {
   cursor: url(http://www.google.com/intl/en_ALL/mapfiles/closedhand.cur), -moz-grabbing;
}

Ok. Mamy zdefiniowane style, ale jak je wykorzystać z drag'n'dropem? Poniżej dwa przykłady dla jQuery UI oraz dla natywnego wsparcia d'n'd przez HTML5.

jQuery UI

Wykorzystując jQuery UI do obsługi drag'n'dropa musimy nadać odpowiednie style dla klas wykorzystywaną przez ten framework. Dla obiektów, które są przenoszone dodawana jest klasa ui-draggable natomiast w momencie przenoszenia nadawana jest klasa ui-draggable-dragging.

Oto ostateczny rezultat dla stylów przy użyciu jQuery UI:

.ui-draggable {
   cursor: url(http://www.google.com/intl/en_ALL/mapfiles/openhand.cur), -moz-grab;
}
.ui-draggable-dragging {
   cursor: url(http://www.google.com/intl/en_ALL/mapfiles/closedhand.cur), -moz-grabbing;
}

HTML5

HTML5 w celu obsługi drag'n'dropa dodaje do JavaScriptu kilka dodatkowych zdarzeń. Do obiektów nie są dodawana żadne klasy, więc operację podmiany kursora przeprowadzimy w JavaScripcie. Podobnie jak w przypadku jQuery UI zrobimy to na zasadzie nadawania klas.

.drag {
   cursor: url(http://www.google.com/intl/en_ALL/mapfiles/openhand.cur), -moz-grab;
}
.ondrag {
   cursor: url(http://www.google.com/intl/en_ALL/mapfiles/closedhand.cur), -moz-grabbing;
}

Plik JavaScript będzie wyglądał następująco:

function dragStart(obj) {
   obj.className = 'drag ondrag';
}

function dragEnd(obj) {
   obj.className = 'drag';
}

a tak definicja naszego obiektu:

<div class="drag" id="draggable" draggable="true" ondragstart="dragStart(this)" ondragend="dragEnd(this)"></div>