Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jQuery] Przesuwanie elementów po kliknięciu myszką i inne
Forum PHP.pl > Forum > Przedszkole
The Night Shadow
załóżmy coś takiego;

  1. <div id="boks_1_kontener">
  2. <div id="boks_1_naglowek">
  3.  
  4. </div>
  5. <div id="boks_1_tresc">
  6.  
  7. </div>
  8. </div>


W jaki sposób za pomocą jquery (BEZ UŻYWANIA WTYCZEK) spowodować, że po kliknięciu w boks_1_naglowek (nie puszczając klawisza myszy) i przesunięciu kursora cały boks_1_kontener zosanie przesunięty o taką ilość pikseli o jaką przesunie się kursor myszy? Po puszczeniu kursora myszy boks ma pozostać w upuszconym miejscu.

Zakładam tutaj, że boks ten bedzie umieszczony gdzieś w obrębie kodu strony. Niekoniecznie przed </body>

Zakładam również że boksów może być kilka. Jeżeli klikamy na boks, ma on zostać przesuunięty na wierzch pozostałych boksów.


WIEM, że są takie wtyczyki, ale one ważą a istotny ejst każdy KB. Czy ktoś coś podobnego już wykonywał?
FlashSplash
Cytat(The Night Shadow @ 17.08.2010, 19:17:58 ) *
załóżmy coś takiego;

  1. <div id="boks_1_kontener">
  2. <div id="boks_1_naglowek">
  3.  
  4. </div>
  5. <div id="boks_1_tresc">
  6.  
  7. </div>
  8. </div>


W jaki sposób za pomocą jquery (BEZ UŻYWANIA WTYCZEK) spowodować, że po kliknięciu w boks_1_naglowek (nie puszczając klawisza myszy) i przesunięciu kursora cały boks_1_kontener zosanie przesunięty o taką ilość pikseli o jaką przesunie się kursor myszy? Po puszczeniu kursora myszy boks ma pozostać w upuszconym miejscu.

Zakładam tutaj, że boks ten bedzie umieszczony gdzieś w obrębie kodu strony. Niekoniecznie przed </body>

Zakładam również że boksów może być kilka. Jeżeli klikamy na boks, ma on zostać przesuunięty na wierzch pozostałych boksów.


WIEM, że są takie wtyczyki, ale one ważą a istotny ejst każdy KB. Czy ktoś coś podobnego już wykonywał?


Voila.
Tutorial (Nettuts+) - http://net.tutsplus.com/tutorials/javascript-ajax/inettuts/
Efekt - http://nettuts.s3.amazonaws.com/127_iNETTUTS/demo/index.html

Wtyczek nie ma, tylko kod HTML + CSS + jQuery (a jquery ważny minimum. 50kB, z tym że możesz bibliotekę wczytywać bezpośrednio ze źródła (szybko działa, sporo osób poleca) - http://ajax.googleapis.com/ajax/libs/jquer...1/jquery.min.js bez tracenia transferu).
everth
@FlashSplash - poczytaj temat, twoje rozwiązanie zawiera co najmniej jedną wtyczkę z jQuery UI i jakiś kod samej wtyczki.

@The Night Shadow - pierwsze spojrzenie - onmousedown (+sprawdzenie który klawisz), nadajemy elementowi pod mychą position:absolute - następnie bind do mousemove który uaktualnia offset przenoszonego elementu według aktualnej pozycji myszy - onmouseup(+sprawdzenie który klawisz), unbind mousemove + ewentualne wypozycjonowanie upuszczanego elementu.

Jak dla mnie powyższe brzmi wystarczająco zniechęcająco by zdecydować się skorzystać z jQuery UI winksmiley.jpg
FlashSplash
Hmm, rzeczywiście, nie zauważyłem. Ale może efekt spodoba się na tyle że autor tematu mnie nie zabije ;P

Poza tym zawsze można dostosować to do swoich potrzeb.
The Night Shadow
No właśnie w zasadzie jquery UI to najczęściej stosowane rozwiązanie jednakże 50KB * 100 000 wejść daje blisko 5GB zbędnego transferu, dlatego zastanawiałem się czy da się to rozwiązać inaczej.
everth
Dla mnie dostosowane jQuery UI to 32 KB. Jeśli martwi cię transfer to nikt nie skazuje cię na to że biblioteki mają być ładowane z twojego serwisu. Skorzystaj z Google API Library - tu masz szybki link do jQuery UI.
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.