Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery UI: Only allow sortable within its own parent level, and not above or below

Basically using a list structure, I'm trying to make each li sortable within it's own level, but not within other levels. So if I'm dragging down Number 1 it won't mix with any of the sub ul's or li's but will only go below Number 2. This is what I have so far, and while it does prevent li's from going ABOVE it's level, it doesn't prevent li's from mixing BELOW it's level. For example right now I can move Number 1 between Number 2.1 and Number 2.2

$(".sortable2, .sortable2 ul").sortable({
     opacity: 0.5,
        stop:function(i){
            $.ajax({
                type: "GET",
                url: "?",
                data: $(this).sortable("serialize")
            });
        }
});



$(".sortable2").selectable();
$(".sortable2").disableSelection();


$('.sortable2').bind('mousedown', function(e) {
     e.stopPropagation();
});

Here is the ul li structure:

<ul class="sortable2">
    <li>Number 1
        <ul class="sortable2">
            <li>Number 1.1</li>
            <li>Number 1.2</li>
        </ul>
    <li>
    <li>Number 2
        <ul class="sortable2">
            <li>Number 2.1</li>
            <li>Number 2.2
                <ul class="sortable2">
                    <li>Number 2.2.1</li>
                    <li>Number 2.2.2</li>
                </ul>
            </li>
        </ul>
    <li>
</ul>
like image 306
kylex Avatar asked Feb 03 '11 22:02

kylex


1 Answers

Your HTML and selectors are both really screwed up. I've cleaned it up for you here. Note that you need to define different class names for the different levels of sortables, or at least make sure that they are not returned by the same selector. Check out this link for a fixed implementation: http://jsfiddle.net/GMUbj/

You could also tune the selectors so you didn't have to continue defining class names and avoid this whole mess altogether, as in: http://jsfiddle.net/HWmz3/

As noted in another answer you could also turn this on or off for individual sublists using the items option if you want to bother to apply a css class to all of the lists you want to sort (note that I left the class turned off on most of the items so you can see how it works): http://jsfiddle.net/DnaBs/

like image 63
schizodactyl Avatar answered Oct 24 '22 12:10

schizodactyl