jQuery意外排序的行为

我正在开发一个项目，我可以生成Word文档，其中一个功能是定义一个目录。我希望我的TOC成为排序章节的可排序jQuery列表。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查看代码，并用它玩

来源

2009-11-24 Ben

增加了一个演示给你，让人们可以在IE7看到问题 –

谢谢！我给你+1把一个在线演示。我在这里支持数十个防火墙，所以我无法做到这一点。该演示确实可以完美地说明发生了什么问题。 – Ben

@Russ Cam：jsbin很好:) – Xinus

只需添加这

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

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

来源

2009-11-24 12:28:34 jitter

谢谢！这的确有窍门！ +1 +接受！再次感谢！ – Ben

男人，抖动，你刚刚救了我的一天！ +1 –

+1此外，我已经去了的修复。 –

jQuery意外排序的行为

回答

相关问题