CODEWITHSUNDEEP
jquery-uijquery-ui-sortable
Dead Programmer
Dead Programmer

Reputation: 12575

Jquery Sortable move the parent item along with its child

Guys i have an requirement in which i have items in jquery sortable. but i also want the child item of the parent to be moved along with the parent.for example when i drag the item1 in the browser , the sub item1,2,3 should be moved along with them and dropped . kindly let me know ,if there is any possibility through UI.

<ul>
<li>
<p> item 1</p>
<ul>
  <li>
     Sub item 1 
  </li>
  <li>
     Sub item 2
  </li>
  <li>
     Sub item 3 
  </li>
</ul>
</li>
<li>
<p> item 2</p>
</li>
</ul>

Upvotes: 0

Views: 2061

Answers (1)

Andrew Whitaker
Andrew Whitaker

Reputation: 126042

You could apply a class or id to the first ul and only apply sortable to that unordered list:

HTML:

<ul id="sortable">
    <li>
        <p> item 1</p>
        <ul>
            <li>
                Sub item 1
            </li>
            <li>
                Sub item 2
            </li>
            <li>
                Sub item 3
            </li>
        </ul>
    </li>
    <li>
        <p> item 2</p>
    </li>
</ul>

JavaScript:

$("#sortable").sortable();

This way, the inner uls are not sortable.

Working example: http://jsfiddle.net/andrewwhitaker/Ds7ds/

Upvotes: 1

Related Questions