Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Sortowanie listy - drag'n'drop
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
Balon
Skorzystałem wczoraj z biblioteki http://interface.eyecon.ro/ - plugin do jQuery. Oferuje on możliwość sortowania za pomocą metody drag&drop.

Przykład działania można zobaczyć tutaj: http://interface.eyecon.ro/demos/sort.html

Użyłem to w projekcie do modyfikowania kolejności w menu. Jednak byłoby bez sensu gdyby użytkownik ustawił sobie kolejność według uznania. A po odświeżeniu zmieniła by się na domyślną.

Pytanie jest następujące: jak po odświeżeniu strony odtworzyć ustawienie bloków w menu ?

Drugi problem mam również z tą biblioteką. Kiedy element jest przeciągany to traci on styl. Każdy blok zawiera u mnie listy. Są one odpowiednia sformatowane (chociażby display: inline; dla <li>). Po podniesieniu elementu np. <li> nie jest już inline. Styl listy zmienia się z żadnego na ten kropkowany. Wielkość h3 zmienia się na inną. Itd...

Dlaczego tak się dzieje?

Proszę o odpowiedz na moje pytania winksmiley.jpg

pozdrawiam !
gekon
Pierwsze: musisz to zapisać po stronie serwera
Drugie: nie wiem, nie znam się, zarobiony jestem.
Balon
Panie Gekonie, odkryłeś amerykę tongue.gif To akurat wiem. Jak potem to ODCZYTAĆ i ułożyć bloki w odpowiedniej kolejności ?

Dodam, że nie są one zapisywane w bazie. Czysty html, z wczytywanymi zmiennymi ze SMARTYego tongue.gif
gekon
Pozwolę sobie nie zrozumieć. Wydaje mi się, że powinny mieć jakiś atrybut określający ich pozycję. Jeżeli czegoś takiego nie ma, to jak chcesz to je posortować? A jeżeli jest, to wystarczy PRZEPISAĆ atrybuty: w najgorszym przypadku wszystkim elementom, a optymalnie tylko tym, których pozycja się zmieniła.
Balon
hm tak. ale jeśli w kodzie mam.

  1. <div class="menu">
  2. <div>Menu1</div>
  3. <div>Menu2</div>
  4. <div>Menu3</div>
  5. </div>


a użytkownik zmieni to na

  1. <div class="menu">
  2. <div>Menu3</div>
  3. <div>Menu1</div>
  4. <div>Menu2</div>
  5. </div>


To teraz wykonuje jeszcze raz stronę to nie zmiana pliku html nie ma sensu. więc w jaki sposób mam zmienić kolejność bloków menu?

Myślałem żeby po odswieżeniu wykonać javascripta który odpowiednia pozmienia kolejność bloków (przydzielę im odpowiednie ID) jednak nie wiem jak to zrobić.

Wydawaję mi się że jest prostszy sposób, myślę że ktoś z Was wie jak to zreobic winksmiley.jpg

Prosze o pomoc,
pozdrawiam
gekon
Lekcja pierwsza: Semantyka.

Nie:
  1. <div class="menu">
  2. <div>Menu1</div>
  3. <div>Menu2</div>
  4. <div>Menu3</div>
  5. </div>

Tylko:
  1. <ul id="menu">
  2. <li>Menu 1</li>
  3. <li>Menu 2</li>
  4. <li>Menu 3</li>
  5. </ul>


Lekcja druga: Czytanie ze zrozumieniem.

Wcześniej pisałem o tym, że każdy element powinien mieć jakiś atrybut określający jego pozycję. Jeżeli chcesz żeby to było trwałe MUSISZ to zapisać po stronie serwera, np. w bazie z ustawieniami użytkownika. Potem wyświetlać według zapisanej kolejności.
Balon
  1. <div id="colOne" class="groupWrapper">
  2. <div id="box_tags" class="boxed">
  3. <h3 class="itemHandler">Tags</h3>
  4. <div class="tags">
  5. {foreach key=key item=item from=$TAG_CLOUD}
  6. <a href="tag/{$key}/" style="font-size: {$item}px;">{$key}</a>
  7. {/foreach}
  8. </div>
  9. </div>
  10. <div id="box_link1" class="boxed">
  11. <h3 class="itemHandler">Lorem ipsum dolor</h3>
  12. <ul>
  13. <li class="first"><a href="#">Sed accumsan congue</a></li>
  14. <li><a href="#">Nulla dignissim nec augue</a></li>
  15. <li><a href="#">Nunc ante elit nulla</a></li>
  16. <li><a href="#">Aliquam suscipit consequat</a></li>
  17. <li><a href="#">Cursus sed arcu sed</a></li>
  18. <li><a href="#">Nulla dignissim nec augue</a></li>
  19. </ul>
  20. </div>
  21. <div id="box_link2" class="boxed">
  22. <h3 class="itemHandler">Mauris cras libero</h3>
  23. <ul>
  24. <li class="first"><a href="#">Sed accumsan congue</a></li>
  25. <li><a href="#">Nulla dignissim nec augue</a></li>
  26. <li><a href="#">Nunc ante elit nulla</a></li>
  27. <li><a href="#">Aliquam suscipit consequat</a></li>
  28. <li><a href="#">Cursus sed arcu sed</a></li>
  29. <li><a href="#">Nulla dignissim nec augue</a></li>
  30. </ul>
  31. </div>
  32. </div>


Pokazuje CI w tym momencie fragment mojego pliku *.tpl. Załóżmy, że zapisuje kolejność w pliku cookie. Teraz przy ładowaniu strony chcę załadować kolejność z ciastka. No i jak teraz to zrobić?

Jak dla mnie zostaje tylko ustalanie kolejności po stronie przeglądarki. Ale jak?
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.