Question

I’m trying to get it so that each sub list can only be ordered within its group.
This works perfectly in FF, but in IE it either moves the entire parent(s) or, using e.stopPropagation(); kills the functionality completely within the child. I need the functionality alive within the child.

Suggestions?

$(document).ready(function() {

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


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

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

});

And the HTML:

<ul id="sortable2">
    <li>One</li>
    <li>Two</li>
    <li>Three
        <ul id="sortable2">
            <li>One-3</li>
            <li>Two-3</li>
        </ul>
    </li>
</ul>

Answer 1

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
    $(".sortable2").sortable({
       opacity: 0.5,
       stop:function(i){
       $.ajax({
            type: "GET",
            url: "?",
            data: $(this).sortable("serialize")
       });
       }
   }).bind('mousedown', function(e) {
       if ($.browser.msie) {
           e.stopPropagation();
       };
   });
});
</script>

<ul class="sortable2">
    <li>One</li>
    <li>Two</li>
    <li>Three
        <ul class="sortable2">
            <li>One-3</li>
            <li>Two-3</li>
        </ul>
    </li>
</ul>

Tested in IE6/7/8, Chrome, FF.