I have a problem with using a sortable. my code is:
<ul id="sortable1" class="connectedSortable">
<li>Item 1a</li>
<li>Item 1b</li>
<li>Item 1c</li>
</ul>
<ul id="sortable2" class="connectedSortable">
<li>Item 2a</li>
<li>Item 2b</li>
<li>Item 2c</li>
</ul>
<style>
#sortable1 { width: 100px; }
#sortable2 { width: 300px; }
#sortable1 li, #sortable2 li { width: auto;}
</style>
<script type="text/javascript">
$(function() {
$( "#sortable1, #sortable2" ).sortable({
connectWith: ".connectedSortable"
}).disableSelection();
});
</script>
I can move item from #sortable2 to #sortable1, but i can't move item from #sortable1 to #sortable2. So as you can see Sortable interaction has a problem with moving items from different-size columns.