Сортируемые + вложенные списки с пользовательским интерфейсом jQuery 1.8.2

Этот вопрос во всем, SO, но никто, кажется, не имел той же проблемы, что и я.

Когда я делаю что-то вроде этого

$(function(){
    $('#unique-ul').sortable({items:'li'});
});

Я ожидаю, что он "просто сработает". По большому счету, это так. Я могу перетащить любую <li> из любого списка в любой другой список и любой подписок этого <li> перетаскивается с ним.

Однако при перетаскивании кажется, что он действительно запутался в том, где его нужно отбросить. Вот пример использования 1.8.0; он отображает то же поведение.

http://jsbin.com/ewuxi3/

Все остальные ответы, которые я нашел об этом, заставляют меня поверить, что это поведение поддерживается jQuery UI; например, вот ошибка, зарегистрированная против 1.7 вложенных draggables: http://dev.jqueryui.com/ticket/4333

Я не могу найти кого-либо еще, у кого была эта проблема, поэтому я предлагаю, чтобы я делал это неправильно. Любые подсказки?

Ответы

Ответ 1

это происходит, потому что Sortable не знает, если вы находитесь выше вложенного <li> или того, который его содержит. Одним из решений является использование такой структуры:

<ul>
  <li><div>Item 1</div>
    <ul>
      <li><div>Subitem 1</div></li>
      <li><div>Subitem 2</div></li>
    </ul>
  </li>
  <li><div>Item 2</div></li>
  <li><div>Item 3</div></li>
</ul>

и установите опцию toleranceElement: '> div'. Я не знаю, почему он не документирован, но он там, и он сообщает Sortable учитывать только <div> при вычислении пересечений.

В случае, если вам интересно, я недавно разработал плагин, который упрощает вложенную сортировку, позволяя создавать новые вложенные списки "на лету".