嵌套的可排序 JQuery 列表在 IE 中不起作用，而在 FF 中起作用

Question

虽然我经常将此站点用作 jQuery 相关问题的资源，但这次我似乎找不到答案。所以这是我的第一篇文章。

在白天的工作中，我正在开发一个用于生成 MS Word 文档的信息系统。我正在开发的模块之一是用于为目录定义默认章节选择并按给定章节选择文本。用户可以提交新章节，如有必要，将它们作为子章节添加到父章节，将它们标记为“在 TOC 中采用”并将默认文本（来自另一个模块）链接到章节。

我的章节列表是从 MySQL 表中递归检索的，可能看起来像这样：

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

在 FireFox 中，代码就像一个魅力，但 IE (7) 似乎不太喜欢它。我只能正确地拖动主要章节。当试图拖动一个子章节时，无论它的水平如何，对应的主章节都会与一些孩子一起抬起，而不是全部。

这是我用来完成任务的 jQuery 代码：

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

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

有人对此有一些想法吗？我猜 IE 有点落在了多类引用“chapter_list”上，同时 jQuery 试图处理可拖动/可排序。

Answer 1

我相信您可以通过仅将 sortable 应用于根 <ul> 元素而不是树中的所有元素来解决此问题。这适用于我测试过的所有浏览器，但不幸的是，在拖动“跳跃”相当多之后，插入项目的位置会稍微不那么流畅。

基本上是这样的：

<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

这是一个很长的镜头，但请尝试将下划线替换为其他内容，例如一个连字符。下划线曾在某些浏览器中导致问题。

Mozilla 开发者中心：Underscores in class and ID names.