jquery - To drag and drop, parent and child elements separately -

jquery - To drag and drop, parent and child elements separately -

for example, have made jsfiddle can drag parent , kid 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 drag, parent element, kid elements drag along it. need is, drag them separately. when drag parent, parent element lone should drag , when dragging child, kid element should lone should drag. how possible?

please suggest method.

moving parent without it's children doesn't create sense in situations, won't find out-of-the-box solution.

if it's possible alter html, might work 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 <li> valid kid of <ul>, <ul> valid kid of <li>.

jquery

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

here's result on jsfiddle.

jquery drag-and-drop jquery-ui-draggable jquery-ui-droppable