title: jQuery Drag and Drop inbetween two li elements
body: <p>I am developing a Tree view and using JQuery Draggable and Droppable plugins to implement Drag and Drop the tree nodes.</p>
  
  <p><img src="https://i.stack.imgur.com/Uyej9.png" alt="enter image description here"></p>
  
  <p>I can drag a folder and drop over another and get the dropped element in "drop" event handler. In my drop event handler I will rearrange my nodes.</p>
  
  <p>HTML Code:</p>
  
  <pre><code>&lt;ul class="dragul"&gt;
      &lt;li class="dragli" id="1"&gt;&lt;a class="draga"&gt;Folder1&lt;/a&gt;
          &lt;ul class="dragul"&gt;
              &lt;li class="dragli" id="11"&gt;&lt;a class="draga"&gt;Folder11&lt;/a&gt; &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li class="dragli" id="2"&gt;&lt;a class="draga"&gt;Folder2&lt;/a&gt; &lt;/li&gt;
      &lt;li class="dragli" id="3"&gt;&lt;a class="draga"&gt;Folder3&lt;/a&gt; &lt;/li&gt;
      &lt;li class="dragli" id="4"&gt;&lt;a class="draga"&gt;Folder4&lt;/a&gt; &lt;/li&gt;
      &lt;li class="dragli" id="5"&gt;&lt;a class="draga"&gt;Folder5&lt;/a&gt; &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>JS Code:</p>
  
  <pre><code>$( ".draga" ).draggable({
      cursor: "pointer",
      cursorAt: { top: 12, left: 18 },
      helper: function( event ) {
          var temp_name = event.target.innerHTML;
          return $( "&lt;div id='draghelper' class='ui-widget-header drag-helper'&gt;"+temp_name+"&lt;/div&gt;" );
      }
  });
  
  $( ".draga" ).droppable({
      drop: function( event, ui ) {
          // On dropping on a node will handle here to rearrange the node.
      },
  });
  </code></pre>
  
  <p>Now I also need to drag a node and drop in between two nodes. Like need to drag "Folder5" and drop in between "Folder2" and "Folder3".</p>
  
  <p>I also need to show a helper to drop in between two nodes when the dragged hover is in between the nodes.</p>
  
  <p>JSBIN - <a href="http://jsbin.com/favija/1/" rel="nofollow noreferrer">Link</a></p>