jQuery неожиданное сортируемое поведение

Я работаю над проектом, в котором я могу генерировать документы 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, чтобы увидеть код и поиграть с ним

Источник

1 ответ

Решение

Просто добавь это

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

Это остановит IE всплывать mousedown событие для родителя ul, что вызывает странное сортируемое поведение, которое вы видели. Теперь должно работать как положено

Источник
Другие вопросы по тегам