jQuery Sortable for combination of two different lists -

jQuery Sortable for combination of two different lists -

i want combine 2 list sorting work single list. code is.

$(function () { $("#sortable").sortable({ connectwith: "#sortable1" }); $("#sortable1").sortable({ connectwith: "#sortable" }); $("#sortable,#sortable1").disableselection(); });

my html is.

<ul id="sortable"> <li class="ui-state-default">1</li> <li class="ui-state-default">2</li> <li class="<ui-s></ui-s>tate-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> <li class="ui-state-default">8</li> <li class="ui-state-default">9</li> <li class="ui-state-default">10</li> <li class="ui-state-default">11</li> <li class="ui-state-default">12</li> </ul> <ul id="sortable1"> <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> <li class="ui-state-default">8</li> <li class="ui-state-default">9</li> <li class="ui-state-default">10</li> <li class="ui-state-default">11</li> <li class="ui-state-default">12</li> </ul>

when remove

</ul> <ul id="sortable1">

from html work want want same result 2 different lists. clear understanding please check http://jsfiddle.net/67hew/4/

thanks

sortable connectwith not work float. remove "float:left" , add together "display:inline-block":

#sortable li, #sortable1 li { margin: 3px 3px 3px 0; padding: 1px; display:inline-block; width: 100px; height: 90px; font-size: 4em; text-align: center; }

jquery jquery-ui jquery-ui-sortable jquery-sortable