Robię taką stronę:
http://strona-testowa.doprzodu.com/

Mam tutaj boxy, które przesuwają się w oparciu o Sortable. Żeby nie kopiować całego kodu, to może napiszę tylko strukturę html i kod java script:

[PHP] pobierz, plaintext 
  1. <ul class="sortable sort-right" id="sortable">
  2.   <li class="rightmod">
  3. 	<h3 class="modname">Pogoda</h3>
  4.   </li>
  5.   <li class="rightmod">
  6. 	<h3 class="modname">Waluta</h3>
  7.   </li>
  8.   <li class="rightmod">
  9. 	<h3 class="modname">Mobile</h3>
  10.   </li>
  11.   <li class="rightmod">
  12. 	<h3 class="modname">Banki</h3>
  13.   </li>
  14.   <li class="rightmod">
  15. 	<h3 class="modname">Do pobrania</h3>
  16.   </li>
  17.  
  18.   <li class="verticalmods"><ul id="verticalmods">
  19. 	<li class="verticalmod">
  20. 		<h3 class="modname">Info</h3>
  21. 	</li>
  22. 	<li class="verticalmod">
  23. 		<h3 class="modname">Fun</h3>
  24. 	</li>
  25. 	<li class="verticalmod">
  26. 		<h3 class="modname">Celebrity</h3>
  27. 	</li>
  28. 	<li class="verticalmod">
  29. 		<h3 class="modname">Travel</h3>
  30. 		<div class="box-content"><div>
  31. 	</li>
  32. 	<li class="verticalmod">
  33. 		<h3 class="modname">Community</h3>
  34. 		<div class="box-content"><div>
  35. 	</li>
  36.   </ul></li>
  37.  
  38.   <li class="rightmod">
  39. 	<h3 class="modname">Film</h3>
  40.   </li>
  41.   <li class="rightmod">
  42. 	<h3 class="modname">Gry</h3>
  43.  
  44.   </li>
  45. </ul>
[PHP] pobierz, plaintext 


[PHP] pobierz, plaintext 
  1. $(function() {
  2.   /* mods */
  3.     $( "#sortable" ).sortable({
  4. 		cancel: ".verticalmods",
  5. 		placeholder: "place-holder-1",
  6. 		opacity: 0.8,
  7. 		revert: 100, //animacja
  8. 		items: ">li:not(.verticalmods)",
  9. 		dropOnEmpty: true,
  10. 	//	forcePlaceholderSize: true,
  11. 		handle: ".modname"   // "uchwyt" do trzymania przesuwanego elementu
  12. 	});
  13.  
  14. 	/*verticalmods */
  15. 	$( "#verticalmods" ).sortable({
  16. 			placeholder: "place-holder-2",
  17. 			opacity: 0.8,
  18. 			revert: 100,
  19. 			dropOnEmpty: true,
  20. 			handle: ".modname"
  21. 	});
  22.  
  23. });
[PHP] pobierz, plaintext



te pionowe boxy są zablokowane w tym pierwszym sortable, i rzeczywiście całego diva nie da się przenieść, można zmieniać tylko kolejność w środku tego diva (drugie sortable). Dałoby się zrobić tak, żeby zawsze przed tym div-em było pięć elementów? Tzn jeśli przeciągnę coś, co jest za div-em, to automatycznie ostatni box u góry wskakuje za div-a?