jQuery unexpected sortable behaviour

问题

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

回答1:

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

来源：https://stackoverflow.com/questions/1789169/jquery-unexpected-sortable-behaviour

标签

jquery

jquery-ui-sortable

behavior

selectable