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

Posted 2023-05-08

【中文标题】嵌套的可排序 JQuery 列表在 IE 中不起作用，而在 FF 中起作用

【英文标题】：Nested Sortable JQuery list doesn't work in IE while it does in FF

【发布时间】：2010-12-17 19:36:52

【问题描述】：

虽然我经常将此站点用作 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 试图处理可拖动/可排序。

【参考方案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( ... );

【讨论】：

但是我最终不会得到所有项目的可排序列表吗？我想选择整个章节，并带有子章节来拖动和重新排序。 Imo 这是通过添加更多<ul>'s 来完成的？

我尝试了您的建议，但最终只能拖动主要项目 1 和 2。当我单击并按住例如 2.3.1 时。整个 2 块被拖动。

我没有尝试过，但您可能想看看添加 items: 'ul' 作为选项是否符合您的要求。

应该，因为我必须以某种方式对嵌套集进行分组。我认为这应该/必须通过嵌套可排序列表来完成？

【参考方案2】：

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

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

【讨论】：

感谢您的快速回复！不幸的是，它没有在有效的解决方案中解决。不过，您发布的链接让我了解了不要在 CSS 中使用 _。我已经更新了源代码。