To drag and drop, parent and child elements separately

Question

For an example, i have made a jsFiddle where i can drag the parent and child elements.

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

Here, when i drag, the parent element, the child elements are also drag along with it. What i really need is, drag them separately. When i drag the parent, the parent element alone should drag and when dragging the child, the child element should alone should drag. How is it possible?

Please suggest a method.

Answer 1

Moving a parent without it's children doesn't make sense in most situations, so you probably won't find an out-of-the-box solution.

If it's possible to alter the HTML, something like this might work for you.

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>

Note that <li> is the only valid child of <ul>, but <ul> is a valid child of <li>.

jQuery

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

Here's the result on JSFIDDLE.