Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [jQuery] Przesuwanie elementów po kliknięciu myszką i inne, Tylko dla zaawansowanych programistów JQuery
The Night Shadow
post 17.08.2010, 18:17:58
Post #1





Grupa: Zarejestrowani
Postów: 495
Pomógł: 2
Dołączył: 5.02.2006
Skąd: Wrocław

Ostrzeżenie: (0%)
-----


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ł?


--------------------
Programista Stron i Serwisów WWW oraz Aplikacji Internetowych
Specjalista ds. Pozycjonowania Aplikacji Internetowych
Copywriter
Go to the top of the page
+Quote Post
 
Start new topic
Odpowiedzi (1 - 5)
FlashSplash
post 17.08.2010, 18:19:30
Post #2





Grupa: Zarejestrowani
Postów: 20
Pomógł: 0
Dołączył: 16.08.2010

Ostrzeżenie: (0%)
-----


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).

Ten post edytował FlashSplash 17.08.2010, 18:21:55
Go to the top of the page
+Quote Post
everth
post 17.08.2010, 18:30:35
Post #3





Grupa: Zarejestrowani
Postów: 782
Pomógł: 153
Dołączył: 21.07.2010

Ostrzeżenie: (0%)
-----


@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


--------------------
Już mi się ani wiedzieć, ani tym bardziej myśleć nie chce.
[Think different]!
Go to the top of the page
+Quote Post
FlashSplash
post 17.08.2010, 18:34:14
Post #4





Grupa: Zarejestrowani
Postów: 20
Pomógł: 0
Dołączył: 16.08.2010

Ostrzeżenie: (0%)
-----


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.
Go to the top of the page
+Quote Post
The Night Shadow
post 17.08.2010, 18:36:20
Post #5





Grupa: Zarejestrowani
Postów: 495
Pomógł: 2
Dołączył: 5.02.2006
Skąd: Wrocław

Ostrzeżenie: (0%)
-----


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.


--------------------
Programista Stron i Serwisów WWW oraz Aplikacji Internetowych
Specjalista ds. Pozycjonowania Aplikacji Internetowych
Copywriter
Go to the top of the page
+Quote Post
everth
post 17.08.2010, 18:48:26
Post #6





Grupa: Zarejestrowani
Postów: 782
Pomógł: 153
Dołączył: 21.07.2010

Ostrzeżenie: (0%)
-----


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.


--------------------
Już mi się ani wiedzieć, ani tym bardziej myśleć nie chce.
[Think different]!
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 24.07.2025 - 17:06