分别拖放，父元素和子元素

Question

例如，我创建了一个jsFiddle，我可以在其中拖动父元素和子元素。

HTML：

<div id='container'>
   <ul>
      parent1
      <li>child1</li>
      <li>child2</li>
      <li>child3</li>
   </ul>
   <ul>
      parent2
      <li>child1</li>
      <li>child2</li>
      <li>child3</li>
   </ul>
</div>

JS：

$("#container ul,li").draggable();

这里，当我拖动时，父元素，子元素也随之拖动。我真正需要的是，将它们分开拖动。当我拖动父元素时，应该单独拖动父元素，当拖动子元素时，应该单独拖动子元素。怎么可能？

请提出一个方法。

Answer 1

在大多数情况下，在没有孩子的情况下移动父母是没有意义的，因此您可能找不到开箱即用的解决方案。

如果可以更改 HTML，类似的方法可能对您有用。

HTML

<div id='container'>
    <ul>
        <li>parent1</li>
        <li style="list-style: none;">
            <ul>
                <li>child1</li>
                <li>child2</li>
                <li>child3</li>
            </ul>
        </li>
    </ul>
</div>

请注意，<li> 是 <ul> 的唯一有效子代，但 <ul> 是 <li> 的有效子代。

jQuery

$("#container ul li:first, #container ul li ul li").draggable();

这是 JSFIDDLE 上的结果。