Question

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.

Answer 1

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({ ... });

Answer 2

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.

友情链接