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();
    }
});

HTML5对子节点以及父节点元素进行排序使父节点在对其中的子节点进行排序时进行排序

1 个答案: