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试图处理draggable / sortable。

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。

Answer 3

我发现这里的答案jQuery unexpected sortable behaviour能够很好地发挥作用。

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

3 个答案: