title: List Sorting with HTML5 Drag'n'Drop - Drop Above or Below Depending on Mouse
body: <h1>Background</h1>
  
  <p>I am working on a sortable list, to avoid having to manually type in sorting order numbers in a database. It works via HTML5's drag'n'drop functionality, i.e. the new <code>drag*</code> events in Javascript.</p>
  
  <p>I currently have it working for the most part. I can click, and drag, and it'll sort itself.</p>
  
  <h1>Problem</h1>
  
  <p>From what I can tell, the <code>drop</code>, along with the <code>dragstart</code> and <code>dragend</code> events, only are aware of the element they are going into. They can't tell if the mouse is on the top half of the dropzone, or the bottom half.</p>
  
  <p>What I'd like, is when I'm hovering over the top half of a list item, for the dragged content to be placed ABOVE the item. Then if I'm hovering over the bottom half, for the dragged content to be placed BELOW the item.</p>
  
  <h1>Currently:</h1>
  
  <p>In the screencap below, I show a working (simplified) example of my code. I'm using a <code>border-bottom</code> on the drop target to show that it's the target. Notice how when "Item 1" is above "Item 2", "Item 2" is lit up on the bottom, regardless of if I'm hovering over the top half or bottom half.</p>
  
  <p><a href="https://i.stack.imgur.com/bGjim.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/bGjim.gif" alt="enter image description here"></a></p>
  
  <p><strong>Code</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var dragging = null;
  
  document.addEventListener('dragstart', function(event) {
    dragging = event.target;
      event.dataTransfer.setData('text/html', dragging);
  });
  
  document.addEventListener('dragover', function(event) {
      event.preventDefault();
  });
  
  document.addEventListener('dragenter', function(event) {
      event.target.style['border-bottom'] = 'solid 4px blue';
  });
  
  document.addEventListener('dragleave', function(event) {
      event.target.style['border-bottom'] = '';
  });
  
  document.addEventListener('drop', function(event) {
      event.preventDefault();
      event.target.style['border-bottom'] = '';
      event.target.parentNode.insertBefore(dragging, event.target.nextSibling);
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>ul {
    margin:0;
    padding:0
  }
  li {
    cursor:move;
    display:block;
    padding:20px 10px;
    background:white;
    border-bottom:solid 1px gray;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul&gt;
      &lt;li draggable="true" class="sortable-bulk"&gt;List Item 1&lt;/li&gt;
      &lt;li draggable="true" class="sortable-bulk"&gt;List Item 2&lt;/li&gt;
      &lt;li draggable="true" class="sortable-bulk"&gt;List Item 3&lt;/li&gt;
      &lt;li draggable="true" class="sortable-bulk"&gt;List Item 4&lt;/li&gt;
      &lt;li draggable="true" class="sortable-bulk"&gt;List Item 5&lt;/li&gt;
      &lt;li draggable="true" class="sortable-bulk"&gt;List Item 6&lt;/li&gt;
      &lt;li draggable="true" class="sortable-bulk"&gt;List Item 7&lt;/li&gt;
      &lt;li draggable="true" class="sortable-bulk"&gt;List Item 8&lt;/li&gt;
      &lt;li draggable="true" class="sortable-bulk"&gt;List Item 9&lt;/li&gt;
      &lt;li draggable="true" class="sortable-bulk"&gt;List Item 10&lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <h1>Question</h1>
  
  <p>Is there a way I can have it drop either above or below, not always below, depending on the mouse position while dragging?</p>