Witam, korzystam z JQuery UI, z pluginu "sortable" i mam problem z ustawieniem elementów na stronie tak, żeby wszystko działało. Żeby wyjaśnić o co mi dokładnie chodzi to może zacznę od kodu tego co narazie mam:

[HTML] pobierz, plaintext 
 
<style>
	#sortable { list-style-type: none; margin: 0; padding: 0; }
	#sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 100px; height: 90px; font-size: 4em; text-align: center; border:1px solid black }
</style>
 
<script>
	$(function() {
		$( "#sortable" ).sortable();
		$( "#sortable" ).disableSelection();
	});
</script>
 
<div>
<ul id="sortable">
	<li class="ui-state-default">1</li>
	<li class="ui-state-default">2</li>
	<li class="ui-state-default">3</li>
	<li class="ui-state-default">4</li>
	<li class="ui-state-default">5</li>
	<li class="ui-state-default">6</li>
              <li class="ui-state-default">7</li>
</ul>
</div>
[HTML] pobierz, plaintext 

dzięki temu uzyskujemy coś takiego

Wszystko pięknie ładnie działa, sortowanie śmiga jak należy, lecz gdy próbuję wcisnąć to do jakiejś tabeli / diva, co by ułożyć to w sposób taki jak chcę to się cała idea sypie i nie chce za bardzo śmigać.
Efekt jaki chcę uzyskać to coś takiego:

Jakieś pomysły jak się za to zabrać ?