CODEWITHSUNDEEP
jquery-uinestedjquery-ui-sortable
kylex
kylex

Reputation: 14426

jQuery UI IE7 nested unordered list bug

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>

Upvotes: 0

Views: 404

Answers (1)

Pavlo Neiman
Pavlo Neiman

Reputation: 7536

<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.

Upvotes: 2

Related Questions