javascript - Drag nested li doesn't work -

i using jquery-ui sort , drag https://johnny.github.io/jquery-sortable/.. doesn't append in li.. code 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 drag item 3 under item 2 doesn't work..how can solve this?? , have detect li goes under li.. please help..

problem is, empty 'ul'-tags not have space , hidden (size equals zero). add small padding each element, can drag element there. here, have 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>