title: HTML5 Drag'n'Drop - Not Working on iOS 12.1.2 (Safari and Chrome)
body: <h1>Background</h1>
  <p>I have a list that is sortable via drag and drop. It works perfectly on desktop browser, and on Chrome on Android. However, it didn't work at all on Safari and Chrome on iOS 12.1.2 (iPhone 8).</p>
  <h1>Current Code</h1>
  <p>See snippet below, and also for easy mobile testing: <a href="https://codepen.io/Kelderic/pen/KJMRgb" rel="noreferrer">https://codepen.io/Kelderic/pen/KJMRgb</a></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) {
    var target = getLI(event.target);
    dragging = target;
    event.dataTransfer.setData('text/plain', null);
    event.dataTransfer.setDragImage(self.dragging, 0, 0);
  });
  
  document.addEventListener('dragover', function(event) {
    event.preventDefault();
    var target = getLI(event.target);
    var bounding = target.getBoundingClientRect()
    var offset = bounding.y + (bounding.height / 2);
    if (event.clientY - offset &gt; 0) {
      target.style['border-bottom'] = 'solid 4px blue';
      target.style['border-top'] = '';
    } else {
      target.style['border-top'] = 'solid 4px blue';
      target.style['border-bottom'] = '';
    }
  });
  
  document.addEventListener('dragleave', function(event) {
    var target = getLI(event.target);
    target.style['border-bottom'] = '';
    target.style['border-top'] = '';
  });
  
  document.addEventListener('drop', function(event) {
    event.preventDefault();
    var target = getLI(event.target);
    if (target.style['border-bottom'] !== '') {
      target.style['border-bottom'] = '';
      target.parentNode.insertBefore(dragging, event.target.nextSibling);
    } else {
      target.style['border-top'] = '';
      target.parentNode.insertBefore(dragging, event.target);
    }
  });
  
  function getLI(target) {
    while (target.nodeName.toLowerCase() != 'li' &amp;&amp; target.nodeName.toLowerCase() != 'body') {
      target = target.parentNode;
    }
    if (target.nodeName.toLowerCase() == 'body') {
      return false;
    } else {
      return target;
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>ul.sorting {
    padding: 0;
    margin: 0;
    list-style: none;
    max-height: 300px;
    overflow-y: auto;
    box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.2);
  }
  
  ul.sorting li {
    padding: 10px;
    border-bottom: 1px solid black;
    user-select: none;
    cursor: move;
  }
  
  ul.sorting li:last-child {
    border-bottom: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul class="sorting"&gt;
    &lt;li draggable="true" style="user-drag:element;"&gt;List Item 15&lt;/li&gt;
    &lt;li draggable="true" style="-webkit-user-drag:element;"&gt;List Item 2&lt;/li&gt;
    &lt;li draggable="true" style="-webkit-user-drag:element;"&gt;List Item 3&lt;/li&gt;
    &lt;li draggable="true" style="-webkit-user-drag:element;"&gt;List Item 4&lt;/li&gt;
    &lt;li draggable="true" style="-webkit-user-drag:element;"&gt;List Item 5&lt;/li&gt;
    &lt;li draggable="true" style="-webkit-user-drag:element;"&gt;List Item 6&lt;/li&gt;
    &lt;li draggable="true" style="-webkit-user-drag:element;"&gt;List Item 7&lt;/li&gt;
    &lt;li draggable="true" style="-webkit-user-drag:element;"&gt;List Item 8&lt;/li&gt;
    &lt;li draggable="true" style="-webkit-user-drag:element;"&gt;List Item 9&lt;/li&gt;
    &lt;li draggable="true" style="-webkit-user-drag:element;"&gt;List Item 10&lt;/li&gt;
    &lt;li draggable="true" style="-webkit-user-drag:element;"&gt;List Item 11&lt;/li&gt;
    &lt;li draggable="true" style="-webkit-user-drag:element;"&gt;List Item 12&lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  <h1>Video of Behavior on iOS</h1>
  <p><a href="https://imgur.com/a/I8hzPxC" rel="noreferrer">https://imgur.com/a/I8hzPxC</a> (Size is too large for direct embed)</p>
  <h1>Question</h1>
  <p>Why is this not working on iOS? I can't even get the <code>dragstart</code> event to fire. On Android Chrome, a longpress fires the <code>dragstart</code>.</p>
  <p>My fallback idea is to make a longpress using <code>touchstart</code> and <code>touchend</code>, then create my own absolutely positioned ghost element and drag it around manually. That is a lot of extra code when the <code>drag*</code> events should just work.</p>
  <p>Am I missing something?</p>
  <h1>Edit</h1>
  <p>LI elements in mobile Safari have an <code>ondragstart</code> event as part of their prototype. The question is getting it to fire.</p>
  <p>Also, according to caniuse, mobile Safari should support this. However, caniuse also shows Android Chrome as not supporting, which isn't true.</p>