在子元素和父元素上都可排序的HTML5使父元素在对子元素内部的子元素进行排序时进行排序

Question

我有一个待办事项类别的列表，每个类别都将包含一个待办事项列表。我在分类内的待办事项上使用了"Sortables“，这样就可以对分类内的待办事项的顺序进行排序。

现在我还希望将可排序的内容添加到类别中，以便用户可以对整个类别进行排序。我有这样的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“中没有sortable时，”# todoItems“的排序(即每个类别中的集合排序)工作得很好。当我在"#ToDos“上设置sortable时，每个类别的排序都有效，但当我对类别中的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();
    }
});