Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jquery] mousemove, mousedown w przesuwaniu elementow
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
kicaj
Napisalem taki maly kod, o przesuwaniu diva w innym divie:
  1. $(document).ready(function() {
  2. $('#box').mousedown(function() {
  3. $('#box').mousemove(function(e) {
  4.  
  5. x = e.pageX;
  6. y = e.pageY;
  7.  
  8. if(x > 400) {
  9. x = 400;
  10. } else if(x < 100) {
  11. x = 100;
  12. }
  13.  
  14. if(y > 250) {
  15. y = 250;
  16. } else if(y < 100) {
  17. y = 50;
  18. }
  19.  
  20. $('#box').css({top: y-$('#box').height()/2, left: x-$('#box').width()/2});
  21.  
  22. $('#dim').html(x +'x'+ y);
  23. });
  24. }).mouseup(function() {
  25. alert('puscilem');
  26. });
  27. });


Poki co wiekszosc parametrow jest ustawiona na sztywno, ze wzgledu na #box (200x100) i #container (500x300).
Problem polega na tym ze przesuwanie sie zacina i nie wiem jak zrobic by tylko dzialalo kiedy myszka jest wcisnieta, a ty puszczam przesuwanie powinno juz byc zwolnione.
vokiel
Zamiast .css() użyj .animate(), do którego można użyć następnie .stop() i .clearQueue()
krowal
@vokiel - animate() będzie mu opóźniało ruch diva i będzie dziwnie wyglądać.
@kicaj - przy mouseup musisz odłączyć event mousemove od przesuwanego obiektu:
[JAVASCRIPT] pobierz, plaintext
  1. $('#box').mousedown(function() {
  2. $('#box').mousemove(function(e) {
  3.  
  4. x = e.pageX;
  5. y = e.pageY;
  6.  
  7. if(x > 400) {
  8. x = 400;
  9. } else if(x < 100) {
  10. x = 100;
  11. }
  12.  
  13. if(y > 250) {
  14. y = 250;
  15. } else if(y < 100) {
  16. y = 50;
  17. }
  18.  
  19. $('#box').css({top: y-$('#box').height()/2, left: x-$('#box').width()/2});
  20.  
  21. $('#dim').html(x +'x'+ y);
  22. });
  23. }).mouseup(function() {
  24. $('#box').unbind('mousemove'); //wyłączenie obsługi eventu mousemove
  25. alert('puscilem');
  26. });
[JAVASCRIPT] pobierz, plaintext

kicaj
Zrobiem cos jeszcze prostszego.
Zastosowalem zmienna boolean, ktora domyslnie ma wartosc false, a przy 'mousedown' ustawia wartosc true. Natomiast 'mousemove' dziala tylko kiedy owa zmienna jest true.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.