CODEWITHSUNDEEP
jquerydrag-and-dropjquery-ui-draggablejquery-ui-droppable
Nayana_Das
Nayana_Das

Reputation: 1817

To drag and drop, parent and child elements separately

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.

Upvotes: 1

Views: 2038

Answers (1)

Magnus Engdal
Magnus Engdal

Reputation: 5634

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.

Upvotes: 1

Related Questions