jquery - HTML5 Sortable on both children 以及 parent 元素使 Parent 在对其中的子元素进行排序时进行排序

Question

我有一个待办事项类别列表，每个类别将包含一个待办事项列表。我在类别内的 todos 上使用了“Sortables”，以便对类别内的 todos 的顺序进行排序。

现在我还希望将分类添加到类别中，以便用户可以对整个类别进行排序。我有这样的 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

使用 jquery sortable 的 item 选项来指定要排序的元素

http://api.jqueryui.com/sortable/#option-items

在你的情况下，

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

希望这可以帮助

看看这个。

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

当您开始拖动 todoItem 时，事件会冒泡到您的父母，并且由于您的类别也是可排序的，因此它也开始拖动。

试试这样的，

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