Nested Sortable JQuery list doesn't work in IE while it does in FF
- by Ben Fransen
Hello everybody,
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>
</ul>
</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.
Kinds regards from Holland,
Ben Fransen
