jQuery意外的可排序行为 [英] jQuery unexpected sortable behaviour
问题描述
我正在一个可以生成Word文档的项目中，功能之一就是定义目录.我希望TOC成为可排序的jQuery列表，用于对章节进行排序.
I'm working on a project where I can generate Word documents, one of the functionalities is to define a table of contents. I want my TOC to be a sortable jQuery list for sorting the chapters.
我正在从MySQL表中递归检索数据，该表按预期运行.由于我发现IE7(以及可能的其他版本)中存在一些奇怪的行为，因此我转回基础知识，并在没有任何DB生成结构的简单HTML文件中尝试了以下操作.
I'm retreving the data recursivly from a MySQL table, which functions as expected. Since I found there are some strange behaviors in IE7 (and possible other versions) I switched back to basics and tried the following in a simple HTML file without any DB-generated structure.
<!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是默认浏览器，无法进行任何切换.
With this source (no matter the amount of sublevels) I expect each subchapter to be an unique sortable list within its parent chapter. In FireFox this works as it should, but unfortunately at work IE7 is the default browser and no switch can be made.
有人建议做什么吗?
基本上，我只想重新组织列表和嵌套列表.目前，我只能拖动主章周围的内容，当我尝试拖动子章时，相应父级的整个列表结构都将被拖动.因此，当我尝试将"2.2章"拖动到"2.1章"上方时，实际上是在拖动"2章"，唯一的可能性是将其拖动到"1章"之上.
Basicly I just want to reorganize lists and nested lists. At this moment I'm only able to drag arround the mainchapters, when I try to drag a subchapter the entire list-structure from the corresponding parent is getting dragged. So, when I try to drag 'Chapter 2.2' to place it above 'Chapter 2.1' I'm actually dragging 'Chapter 2', with the only posibillity to drag it above 'Chapter 1'.
我希望我的问题很清楚.
I hope my question is clear enough.
这是一个演示.在URL中添加/edit以查看代码并对其进行处理
Here's a Demo. add /edit to the URL to see the code and play with it
推荐答案
只需添加此
$('ul.list').bind('mousedown', function(e) {
e.stopPropagation();
});
这将阻止IE将mousedown事件冒泡到父级ul，这会导致您看到奇怪的可排序行为.现在应该可以正常工作了
This will stop IE from bubbling up the mousedown event to the parent ul, which causes the strange sortable behavior you have seen. Now it should work as expected
这篇关于jQuery意外的可排序行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
