jQuery 意外的可排序行为答案

【问题标题】：jQuery unexpected sortable behaviourjQuery 意外的可排序行为
【发布时间】：2009-11-24 10:24:22
【问题描述】：

我正在开发一个可以生成 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 章”上方的可能性。

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

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

【问题讨论】：

为您添加了一个演示，以便人们可以在 IE7 中看到问题
谢谢！我给了你 +1 的在线演示。我在这里有几十个防火墙，所以我无法做到这一点。该演示确实完美地说明了问题所在。
不是一个真正的答案，但试试这个：swartzfager.org/blog/index.cfm/2008/1/27/…
@Kaze no Koe，感谢您的链接，但这是一个 ColdFusion 示例..

标签： jquery jquery-ui-sortable behavior selectable

【解决方案1】：

添加这个

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

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

【讨论】：

伙计，jitter，你救了我的命！ +1
+1 非常感谢！这些时刻让我很高兴能成为这个社区的一员。