title: Javascript - drag and drop in Internet Explorer and Edge don't work
body: <p>I have drag and drop code that works normally in Chrome and Firefox but it won't work in Internet Explorer 11 and Edge.</p>
  
  <p>This is simplified example of moving nodes in treeview. You drag one node (li element) and put it on another (also li element). So when you drop element to another, it shows alert what is moved on what. And that works in Chrome anf FF but don't work in IE and Edge. Anyone knows why? It seems that IE and Edge handles Drag and Drop differently than other browsers, but I can not figure out what to change.</p>
  
  <p>Here is code (whole page):</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
      &lt;head&gt;
          &lt;title&gt;DD Test&lt;/title&gt;
  
          &lt;!-- jQuery --&gt;
          &lt;link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"&gt;
          &lt;script src="https://code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;ul&gt;
              &lt;li draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;Coffee&lt;/li&gt;
              &lt;li draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;Tea&lt;/li&gt;
              &lt;li draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;Milk&lt;/li&gt;
          &lt;/ul&gt;     
      &lt;/body&gt;
  
  &lt;/html&gt;
  
  
  &lt;script&gt;
      function allowDrop(ev) {
          ev.preventDefault();
      }
  
      function drag(ev) {
          ev.stopPropagation();
          var object = $(ev.target);
          var objectname = object.html();
          ev.dataTransfer.setData("objectname", objectname);
      }
  
      function drop(ev) {
          ev.preventDefault();
          ev.stopPropagation();
          var target = $(ev.target);
          var targetname = target.html();
          var objectname = ev.dataTransfer.getData("objectname");
          alert(objectname + " on " + targetname);
      }
  &lt;/script&gt;
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function allowDrop(ev) {
    ev.preventDefault();
  }
  
  function drag(ev) {
    ev.stopPropagation();
    var object = $(ev.target);
    var objectname = object.html();
    ev.dataTransfer.setData("objectname", objectname);
  }
  
  function drop(ev) {
    ev.preventDefault();
    ev.stopPropagation();
    var target = $(ev.target);
    var targetname = target.html();
    var objectname = ev.dataTransfer.getData("objectname");
    alert(objectname + " on " + targetname);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;ul&gt;
    &lt;li draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;Coffee&lt;/li&gt;
    &lt;li draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;Tea&lt;/li&gt;
    &lt;li draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;Milk&lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>