Question

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

我正在从MySQL表中逐步恢复数据，该表按预期运行。由于我发现在IE7（以及可能的其他版本）中存在一些奇怪的行为，我切换回基础并在一个简单的HTML文件中尝试了以下内容，而没有任何DB生成的结构。

<!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章”之上。

我希望我的问题很清楚。

Here's a Demo.将/edit添加到网址以查看代码并使用它

Answer 1

只需添加此

即可

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

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

jQuery意外的可排序行为

1 个答案: