Question

I have a list like so .

<ul>
    <li>Main</li>
    <li>
       <ul>
           <li>Child 1</li>
           <li>Child 2</li>
       </ul>
    </li>
</ul>

I would like to be able to make two sets of sortables one within the the other.
Just like you would drag a fold to another folder or a file to another file an a tree directory. However I JUST NEED it to be sortable within the parent so it should not move outside the parent.

I tried containment but no luck any other suggestions ?

Answer 1

Found a quick solution but I haven’t tested this on a deeper level so bear with me, but theoretically it should work.

$('.dragger').unbind('mouseenter').bind('mouseenter',function (e){
        e.stopPropagation();
        $(this).parent().sortable({
            items:'li',
            containment:'parent',
            tolerance: 'pointer' ,
            handle: '.dragger',
            revert: true,
            placeholder: "ui-state-highlight",
            forcePlaceholderSize: true,
            cursor: 'move',
        }).disableTextSelection();
    });
    $('.dragger').unbind('mouseleave').bind('mouseleave',function (e){
        $(this).parent().sortable('destroy');
    });

Please Note: that the .dragger is an element within the li element which is not on the original question.