HTML5, сортируемый как по дочерним элементам, так и по родительскому элементу, позволяет родителю сортироваться при сортировке дочерних элементов внутри него

Question

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

Теперь я хочу добавить сортируемые элементы в категории, чтобы пользователь мог отсортировать всю категорию. У меня есть DOM, как это

    <ul id="ToDos">
      <li id="Cat-1"> 
          <ul class='collecton'> 
            <li class='todoItem'></li>
            <li class='todoItem'></li>
            <li class='todoItem'></li>
          </ul>
      </li>
      <li id="Cat-2"> 
          <ul class='collecton'> 
            <li class='todoItem'></li>
            <li class='todoItem'></li>
            <li class='todoItem'></li>
          </ul>
      </li>
      <li id="Cat-3"> 
          <ul class='collecton'> 
            <li class='todoItem'></li>
            <li class='todoItem'></li>
            <li class='todoItem'></li>
          </ul>
      </li>
      <li id="Cat-4"> 
          <ul class='collecton'> 
            <li class='todoItem'></li>
            <li class='todoItem'></li>
            <li class='todoItem'></li>
          </ul>
      </li>
    </ul>

Я дал сортировку по этим с помощью этого

    $('.collection').sortable();
    $('#ToDos').sortable({grid: [100, 50]});

Теперь проблема в том, что когда я не могу сортировать в "#ToDos", сортировка "#collection"(т. Е. Сортировка todoItems внутри каждой категории) работает очень хорошо. Когда я даю сортировку по "#ToDos", сортировка каждой Категории работает, но сортировка Категории также происходит, когда я сортирую todoItem внутри категории, т.е. Категория также меняет свой порядок, когда сортируется todoItem в категории.

Пожалуйста, помогите мне решить эту проблему..

заранее спасибо

Answer 1

Используйте опцию item сортировки jquery, чтобы указать, какие элементы вы хотите отсортировать

http://api.jqueryui.com/sortable/

В твоем случае,

$('#collection').sortable(
    items: "> li"
);

Надеюсь это поможет

Взгляните на это.

http://api.jquery.com/event.stopPropagation/

Когда вы начинаете перетаскивание todoItem, событие всплывает перед вашими родителями, и поскольку ваша категория также сортируется, она также начинает перетаскивать.

Попробуйте что-то вроде этого,

$('.collection li').sortable({
    start: function(event, ui){
        event.stopPropagation();
    }
});