2011-10-12 13 views
8

Mam program interfejsu przeciągania, w którym kursor myszy na elemencie przeciągalnym zmienia się w chwytną dłoń po kliknięciu.Zmienić kursor myszy na całą stronę?

Problemem jest to, że pozwalają na przeciągnięcie się zdarzyć w dowolnym miejscu na ekranie, a zmiany kursor tagów kotwicznych, itp ...

Próbowałem $('*').addClass('grabbing'), ale jest to bardzo drogie.

Czy istnieje prosty i łatwy w obsłudze sposób radzenia sobie z tym problemem?

+0

Patrz także: http://stackoverflow.com/questions/192900/wait-cursor-over-entire-html-page –

Odpowiedz

5

Zrób to na poziomie CSS:

* { 
    cursor: pointer; 
} 

robi to w Zmusza jQuery iteracji każdy pojedynczy węzeł DOM i przepisać swoich klas CSS. Na długim dokumencie to ogromna strata czasu.

+0

Ale to zawsze będzie aktywne. Kursor należy zmienić tylko wtedy, gdy mysz jest wyłączona. To musi się zdarzyć w JavaScript. – Wesley

+0

Możesz dynamicznie dodawać/usuwać reguły css za pośrednictwem javascript. Po prostu zrób to z poziomu onmousedown/onmouseup i powinno być szybsze niż dodawanie/usuwanie klas z każdego węzła domowego na stronie. –

+0

@ Mark B Cool. Czy możesz podać nową odpowiedź na przykładzie? Zrobię to, a jeśli działa poprawnie, zaznaczę to. – Wesley

1

spróbować tej

$('body').addClass('grabbing'); 

LUB

$(document).addClass('grabbing'); 

// edytowany odpowiedź

$('body').mousedown(function(e){ 
    $(this).css({'cursor':'pointer'}); 
}).mouseup(function(e){ 
    $(this).css({'cursor':'auto'}); 
}); 

Jeśli Firebug jest włączona, można zobaczyć zmiany w znaczniku BODY STYLE. Ale niektóre, jak to nie działa. Możesz wziąć to jako punkt odniesienia i wypróbować podobne podejście do rozwiązania.

+0

nie zatrudni elementy zindex przesłonić tego? –

+0

@MikeChristensen Poprawnie. To nie wystarczy. – Wesley

0

Jedyny sposób, w jaki mogę to zrobić, to dość hacky.

Utwórz DIV z indeksem Z czegoś wyższego niż wszystko inne na tej stronie i ma kursor, który chcesz. Włącz ten element div, gdy kursor myszki zostanie naciśnięty. Przykładowy kod:

<html><body style="width: 100%; height: 100%;"> 
<DIV id="cover" style="position: absolute; width: 100%; height: 100%; zindex: 5000; top: 0px; left: 0px; cursor: pointer; background: transparent; display: none;">&nbsp;</div> 

<ul><li>One</li><li>Two</li><li>Three</li></ul> 

<script> 
    window.document.body.onmousedown = function() 
    { 
     document.getElementById('cover').style.display = ''; 
    }; 

    window.document.body.onmouseup = function() 
    { 
     document.getElementById('cover').style.display = 'none'; 
    }; 
</script> 

</body></html> 
Powiązane problemy