Question

I have 9 boxes (div) on a page. I am able to move them to different positions, in a grid like fashion.

So the basic sortable functionality is fine =)

But I have a couple of questions:

What if my boxes vary in width? Which they can do, if one changes the width (1/3, 2/3 and 3/3). Can I still have one 2/3 box and a 1/3 box on the same row but different column? What about the placeholder highlight?

Why can’t I move a box to an empty “ul”? I can’t see the placeholder nor move a box to an empty column? This should work?

I also want my boxes to “ease” to a high-lighted placeholder when moving the box. Right now they just snap to the placeholder.

My current code:

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

Answer 1

There are a couple of problems I see in your script. You are creating a sortable 3 times. Just put all the options in 1 line of code.

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

Second problem I see is your connectWith property. It’s too broad and will also apply to your own ul.connectedSortable. I would rather use something more specific like an id or a class.

For the easing stuff take a look at the revert option.