jQuery 意外的可排序行为

发布于 2024-08-12 09:45:58 字数 1587 浏览 8 评论 0原文

我正在开发一个可以生成Word文档的项目，其中一个功能是定义目录。我希望我的 TOC 成为一个可排序的 jQuery 列表，用于对章节进行排序。

我正在从 MySQL 表中递归地检索数据，其功能符合预期。由于我发现 IE7（以及可能的其他版本）中有一些奇怪的行为，我切换回基础知识并在一个简单的 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 章”上方。

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

这是一个演示。将 /edit 添加到 URL 以查看代码并进行操作它

原文

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.

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>

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.

Does anyone have some suggestions what to do?

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.

Here's a Demo. add /edit to the URL to see the code and play with it

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

葮薆情 2024-08-19 09:45:58

只需添加这个

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

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

Just add this

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

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

回复收藏 0 原文

~没有更多了~