Unexpected sortable jQuery behavior

I am working on a project where I can generate Word documents, one of the functions is to define a table of contents. I want my TOC to be a sorted jQuery list for sorting chapters.

I am returning data recursively from a MySQL table that functions as expected. Since I discovered that IE7 has some weird behaviors (and possible other versions), I switched to the basics and tried the following in a simple HTML file without any structure created in 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 , .

- , ?

. mainchapters, , . , " 2.2", " 2.1", " 2", , " 1".

, .

. /edit URL-,

+5
1

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

IE mousedown ul, , .

+19

All Articles