debin debin - 3 months ago 6
Javascript Question

Drag nested li doesn't work

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

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>

Comments