Nested Sortable JQuery list doesn't work in IE while it does in FF

While I'm using this site quite often as a resource for jQuery related problems I can't seem to find an answer this time. So here is my first post.

During daytime at work I'm developing an informationsystem for generating MS Word documents. One of the modules I'm developing is for defining a default chapterselection for the table of contents and selecting texts by the given chapters. A user can submit new chapters and if necessary, add them as childchapter to a parent, flag them as 'adopt in TOC' and link a default text (from another module) to the chapter.

My chapterlist is retreived recursively from a MySQL table and could look something like this:

<ul class="sortableChapterlist">
  <li>1</li>
  <li>2
    <ul class="sortableChapterlist">
      <li>2.1</li>
      <li>2.2</li>
      <li>2.3
        <ul class="sortableChapterlist">
          <li>2.3.1</li>
          <li>2.3.2</li>
        </ul>
      </li>
    </u开发者_高级运维l>
  </li>
</ul>

In FireFox the code works like a charm but IE (7) doesn't seem to like it that much. I'm only able to correctly drag arround the mainchapters. When attempting to drag a subchapter, no matter it's level, the correspondending mainchapter lifts up with some child, never all.

This is the jQuery code I'm using to accomplish the task:

$(function(){
  $(".sortableChapterlist").sortable({
    opacity: 0.7,
    helper:  'clone',
    cursor:  'move'
  });

  $(".sortableChapterlist").selectable();
  $(".sortableChapterlist").disableSelection();
});

Does anybody have some ideas about this? I'm guessing IE kinda falls over the multiple class reference "chapter_list" in combination with jQuery trying to handle the draggable/sortable.

I believe you could fix this by only applying the sortable to the root <ul> element, rather than all of them in the tree. This works in all browsers I have tested, but unfortunately leads to a slightly less smooth experience as the position at which the item will be inserted after dragging "jumps around" quite a bit.

Essentially this would look like this:

<ul id="sortableNestedList" class="sortableChapterlist">
  <li>1</li>
  <li>2
    <ul class="sortableChapterlist">
      <li>2.1</li>
      <li>2.2</li>
      <li>2.3
        <ul class="sortableChapterlist">
          <li>2.3.1</li>
          <li>2.3.2</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

$("#sortableNestedList").sortable({ ... });

This is a long shot, but try to replace the underscores with something else, e.g. a hyphen. Underscores used to cause problems in some browsers.

Mozilla Developer Center: Underscores in class and ID names.