5

我正在开发一个可以生成 Word 文档的项目，其中一个功能是定义目录。我希望我的 TOC 是一个可排序的 jQuery 列表，用于对章节进行排序。

我正在从 MySQL 表中递归地检索数据，该表按预期运行。由于我发现 IE7（以及可能的其他版本）中存在一些奇怪的行为，我切换回基础并在没有任何 DB 生成结构的简单 HTML 文件中尝试以下操作。

<!doctype html>
<html>
<head>
<script type="text/javascript" src="./jquery-1.3.2.js"></script>
<script type="text/javascript" src="./ui/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript">
  $(function() {
    $("ul.list").sortable({
      opacity: 0.7,
      helper: 'clone',
      cursor: 'move',
      tolerance: 'pointer'
    });
  $("ul.list").selectable();
  $("ul.list").disableSelection();
});
</script>
<style type="text/css">
ul.list {
  list-style:none;
  padding:none;
  margin:none;
  border:1px solid #EFEFEF;}
ul.list:hover {
  border:1px dotted #333;}
</style>
</head>
<body>
  <ul class="list">
    <li>Chapter 1</li>
    <li>Chapter 2
      <ul class="list">
        <li>Chapter 2.1</li>
        <li>Chapter 2.2</li>
      </ul>
    </li>
  </ul>
</body>
</html>

有了这个来源（无论子级别的数量），我希望每个子章节在其父章节中都是一个唯一的可排序列表。在 FireFox 中，这可以正常工作，但不幸的是，IE7 是默认浏览器，无法进行切换。

有人有什么建议吗？

基本上我只想重新组织列表和嵌套列表。目前我只能拖动主要章节，当我尝试拖动子章节时，相应父级的整个列表结构都被拖动了。因此，当我尝试将“第 2.2 章”拖动到“第 2.1 章”上方时，我实际上是在拖动“第 2 章”，只有将其拖动到“第 1 章”上方的可能性。

我希望我的问题足够清楚。

这是一个演示。添加/edit到 URL 以查看代码并使用它

4

1 回答 1

18

只需添加这个

$('ul.list').bind('mousedown', function(e) {
  e.stopPropagation();
});

这将阻止 IE 将mousedown事件冒泡到 parent ul，这会导致您看到的奇怪的可排序行为。现在它应该按预期工作

于 2009-11-24T12:28:34.097 回答