jQuery意外的可排序行为

我正在开发一个可以生成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.添加/编辑URL以查看代码并使用它

解决方法

只需添加这个

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

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

jQuery意外的可排序行为

解决方法

相关文章