我正在开发一个可以生成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,这会导致您看到的奇怪的可排序行为.现在它应该按预期工作
