JQuery nested sortable list doesn't work in IE while it works in FF

Question

Although I often use this site as a resource for jQuery related issues, I cannot find an answer this time. So here is my first post.

In the daytime at work, I develop an information system for creating MS Word documents. One of the modules I am developing is defining a standard chapterselection for the table of contents and selecting texts for these chapters. The user can send new chapters and, if necessary, add them as a child of the parent, specify them as "accept in TOC" and associate the default text (from another module) with the chapter.

My partition list is returned recursively from a MySQL table and might 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> </ul> </li> </ul> 

In FireFox, the code works like a charm, but IE (7) doesn't seem to like it very much. I can only drag the main files correctly. When you try to drag the heading, regardless of its level, the corresponding main element rises with some kind of child, and not all.

This is the jQuery code that I use to complete the task:

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

Does anyone have any ideas about this? I assume IE seems to fall for a link to several "chapter_list" classes in conjunction with jQuery trying to handle draggable / sortable ones.

Answer 1

I believe that you can fix this by applying only the sortable to the root <ul> element, and not all of them in the tree. This works in all browsers that I tested, but, unfortunately, leads to a slightly less smooth experience, since the position in which the element will be inserted after dragging “jumps” quite a bit.

Essentially, it will 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({ ... }); 

Answer 2

This is a long shot, but try replacing underscores with something else, for example. hyphen. The underscores used to cause problems in some browsers.

Mozilla Developer Center: Emphasizes class names and identifiers .

Answer 3

I found the answer here is jQuery's unexpected sorting behavior to work very well.