Чтобы перетащить, родительский и дочерний элементы отдельно

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.