JQuery Floating Boxes of Different Size

Question

I have 9 floating boxes on a page with 3 columns, generated from this JQ script:

<script type="text/javascript"> 
    $(function() { 
        $("ul.connectedSortable").sortable({handle:'.kpiValueContainer', connectWith:'trysomethingelse', placeholder:'ui-state-highlight', revert: true});
    }); 
</script>

The columns are in fact "ul" and the boxes are "li", so there are 3 boxes "li's" in each column "ul's".

This is my HTML:

<div class="boxContainer">
   <ul id="column1" class="connectedSortable">
      <li class="box1"></li>
      <li class="box2"></li>
      <li class="box3"></li>
   </ul>
   <ul id="column2" class="connectedSortable">
      <li class="box4"></li>
      <li class="box5"></li>
      <li class="box6"></li>
   </ul>
   <ul id="column3" class="connectedSortable">
      <li class="box7"></li>
      <li class="box8"></li>
      <li class="box9"></li>
   </ul>
</div>

My question is, how can I have boxes of different size in the same column without messing up the whole scene =)

My placeholder should match the current moving box, ie it should "know" it's a box of size A, B or C and thus adapt to the box size.

My CSS:

.boxContainer
{
    margin:0px;
    width:1100px;
    height:auto;}

.column1, .column2, .column3 { 
    list-style-type: none;
    margin:0 10px 0 0px;
    float:left;
    height:auto;
    width:300px;}

html>body .column1 li, .column2 li, .column3 li { 
    height:auto;
    width:300px;}

.column1 li, .column2 li, .column3 li {
    margin:50px 0 0 0px;
    height:255px;
    width:300px;}

Answer 1

I think all you are missing is forcePlaceholderSize:true in your sortable definition.

That, combined with placeholder: 'ui-state-highlight' will make placeholders that are the same size as the box you are moving...

Here's an example of it working: http://jsfiddle.net/ryleyb/Y5fzX/1/