拖动嵌套李不起作用

Question

I am using jquery-ui for sort and drag https://johnny.github.io/jquery-sortable/ .. But it doesn't append in li.. The code is like

 $("#example3 ul").sortable({ placeholder: "ui-state-highlight", connectWith: '#example3 ul' }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <div id="example3"> <ul> <li >Item 1 <ul> <li>Item 1 1</li> <li>Item 1 2</li> <li>Item 1 3</li> </ul> </li> <li >Item 2<ul></ul></li> <li >Item 3<ul></ul></li> <li >Item 4<ul></ul></li> </ul> </div> 

If I drag item 3 to under item 2 then it doesn't work..How can I solve this?? and also I have to detect that which li goes under which li.. please Help..

Answer 1

Problem is, that the empty 'ul'-Tags does not have any space and are hidden (size is equals zero). Just add a small padding to each element, then you can drag your element there. Here, have a look:

 $("#example3 ul").sortable({ placeholder: "ui-state-highlight", connectWith: '#example3 ul' }); 

 #example3 ul{ padding-bottom: 0.3em; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <div id="example3"> <ul> <li >Item 1 <ul> <li>Item 1 1</li> <li>Item 1 2</li> <li>Item 1 3</li> </ul> </li> <li >Item 2<ul></ul></li> <li >Item 3<ul></ul></li> <li >Item 4<ul></ul></li> </ul> </div>