How to allow certain item to sort with nested list using jQuery sortable

Question

I've gotten myself stuck in a rut here. I have a bunch of nested <div>'s that can be sorted ONLY on the level that is specified. So, for example:

<div class='level1'></div>
<div class='level1'>
    <div class='level2'></div>
    <div class='level2'></div>
</div>

The div with class 'level1' should not be able to be sorted into area with level2 and vice versa. I got that working fine. Now the problem lies in allowing a certain div:

<div class='label'></div>

To sort anywhere without the level restriction.

Here's my attempt at getting that effect: http://jsfiddle.net/Y56sR/4/

It's a significantly simpler version of what I'm actually working with but I think it will get me in the right direction.

You'll notice sorting anything that isn't a label works perfectly, contained within its respective parent. But then attempting to sort a label into those areas is just not working right at all. It almost works but it gets all jittery and its very hard to move it to the correct spot.

Any ideas people? It may be that I have to rework the html for the desired effect which is gonna be a big step backwards since I already got the restriction thing working.

Answer 1

Okay I managed to create a work around by essentially undoing the nested html during sort.

shown here: http://jsfiddle.net/Y56sR/19/

When you sort a label you will notice the boxes are no longer nested which then allows you to put the label anywhere.

Here is the altered code:

//check if the item being sorted is a label
$(".item").mousedown(function(){
    var label = $(this).find(".link[data-label='1']");
    if(label.length > 0){
        //remove nesting and treat all items equal so sort works properly
        $(".item").each(function(){
            var thisItem = $(this);
            var childItem = thisItem.find(".item");

            childItem.remove();
            thisItem.after(childItem);
        });
        //change items from only rootItem to all items since now they are unnested
        $("#container").sortable({
            items: ".item",
            stop: function(e,ui){
                //renest the html and reapply sortable for non-label here
            }
        });
    }
});