4

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

4

2 回答 2

3

我相信您可以通过仅将可排序对象应用于根<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({ ... });
于 2009-11-19T13:56:38.757 回答
2

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

Mozilla 开发者中心：类和 ID 名称中的下划线。

于 2009-11-18T10:17:34.563 回答