title: How to stop dragend's default behavior in drag and drop?
body: <p>I hard to sum this bug in words. So I made the <a href="https://www.youtube.com/watch?v=Uz_ukKdg1O0&amp;feature=youtu.be" rel="noreferrer">video</a> for the bug.
  Basically when dragEnd is called the element animates as if going to original place. How to stop the default behavior? I made a <a href="https://jsfiddle.net/m91osn5b/" rel="noreferrer">fiddle</a> and <a href="https://codepen.io/igaurav/pen/pPWwXR" rel="noreferrer">codepen</a> for this too.</p>
  
  <p>I have two list for my example, when calling dragEnd after releasing mouse button. The element from one list animates going to list of its original place instead of the place it is going to be.</p>
  
  <p>JS code:</p>
  
  <pre><code>'use strict';
  
  var source = null; var heightWidth = null; var lastDragOverElementId = null; var dragImageSource = null;
  
  function listItemDragStartHandler(event) {
      source = event.currentTarget;
      heightWidth = [];
      heightWidth.push(source.offsetHeight);
      heightWidth.push(source.offsetWidth);
      event.dataTransfer.setData('text/html', event.currentTarget.innerHTML);
      event.dataTransfer.effectAllowed = 'move';
      // Drag image logic
      dragImageSource = source.cloneNode(true);
      dragImageSource.style.position = 'absolute';
      // Don't show the element
      dragImageSource.style.top = '0px';
      dragImageSource.style.left = '-' + String(window.innerWidth) + 'px';
      // dragImageSource.style.left = '-100px';
      var toTiltElement = dragImageSource.getElementsByClassName('item-list-element')[0];
      toTiltElement.style.transform = 'rotate(5deg)';
      document.body.append(dragImageSource);
      event.dataTransfer.setDragImage(dragImageSource, heightWidth[1]/2, heightWidth[0]/2); }
  
  function dragoverHandler(event) {
      event.preventDefault();
      event.dataTransfer.dropEffect = 'move';
      source.style.display = 'none';
      var currentElement = event.currentTarget;
      var listContainer = currentElement.parentNode;
      if (lastDragOverElementId != currentElement.getAttribute('id')) {
          lastDragOverElementId = currentElement.getAttribute('id');
          if(document.getElementById('grayed-empty-node') !== null) {
              if(currentElement.getAttribute('id') !== 'grayed-empty-node') {
                  document.getElementById('grayed-empty-node').remove();
              }
          }
          var isGrayEmptyNodeThere = document.getElementById('grayed-empty-node');   //
          if(isGrayEmptyNodeThere === null) {
              var emptyNode = document.getElementById('empty-node').cloneNode(true);
              emptyNode.removeAttribute('id');
              emptyNode.setAttribute('id', 'grayed-empty-node');
              emptyNode.setAttribute('class', 'fade-in');
              emptyNode.style.height = String(heightWidth[0]) + 'px';
              emptyNode.style.width = String(heightWidth[1]) + 'px';
              listContainer.insertBefore(emptyNode, currentElement);
          }
      } }
  
  function dragLeaveHandler(event) {
      event.preventDefault();
      var currentElement = event.currentTarget;
      var listContainer = currentElement.parentNode;
      var elementList = listContainer.getElementsByClassName('item-template-container');
      var visibleElementList = [];
      var i = 0;
      for (i=0; i&lt;elementList.length; i++) {
          if (elementList[i].style.display !== 'none') {
              visibleElementList.push(elementList[i]);
          }
      }
      // Last element ondragleave handler should be delayed, otherwise it
      // would spin off chain reaction.
      var lastVisibleElement = visibleElementList[visibleElementList.length - 1];
      // Basically last element
      if (currentElement.id === lastVisibleElement.getAttribute('id')) {
          lastVisibleElement.removeAttribute('ondragleave');
          if(document.getElementById('grayed-empty-node') !== null) {
              document.getElementById('grayed-empty-node').remove();
          }
          var isGrayEmptyNodeThere = document.getElementById('grayed-empty-node');
          if(isGrayEmptyNodeThere === null) {
              var listContainer = currentElement.parentNode;
              var emptyNode = document.getElementById('empty-node').cloneNode(true);
              emptyNode.removeAttribute('id');
              emptyNode.setAttribute('id', 'grayed-empty-node');
              emptyNode.setAttribute('class', 'fade-in');
              emptyNode.style.height = String(heightWidth[0]) + 'px';
              emptyNode.style.width = String(heightWidth[1]) + 'px';
              listContainer.insertBefore(emptyNode, null);
          }
          // This delayed the chain reaction
          setTimeout(function() {
              visibleElementList[visibleElementList.length - 1].setAttribute('ondragleave', 'dragLeaveHandler(event);');
          }, 500);
      // When event is on last element set the lastDragOverElementId to null
      // then dragover to lastVisibleElement(second last element) can be handled
      // otherwise dragover to second last element won't show placeholder.
      lastDragOverElementId = null;
      } }
  
  function dragEndHandler(event) {
      event.preventDefault();
      // Check the dropEffect
      dragImageSource.remove();
      var listElement = document.getElementById('grayed-empty-node')
      var listContainer = listElement.parentNode;
      if (event.dataTransfer.dropEffect === 'none') {
          var grayEmptyNode = document.getElementById('grayed-empty-node');
          // When grayEmptyNode is null, that will append at the end.
          listContainer.insertBefore(source, grayEmptyNode);
          source.style.display = '';
          if(document.getElementById('grayed-empty-node') !== null) {
              document.getElementById('grayed-empty-node').remove();
          }
      } else if (event.dataTransfer.dropEffect === 'move') {
          var grayEmptyNode = document.getElementById('grayed-empty-node');
          // When grayEmptyNode is null, that will append at the end.
          listContainer.insertBefore(source, grayEmptyNode);
          source.style.display = '';
          if(document.getElementById('grayed-empty-node') !== null) {
              document.getElementById('grayed-empty-node').remove();
          }
      } }
  
  function delete_item(event) {
      var currentElement = event.currentTarget;
      var grandParentOfDelete = currentElement.parentNode.parentNode;
      grandParentOfDelete.remove(); }
  
  function add_item() {
      var item_text_node = document.getElementsByName('add-item-text')[0]
      var item_text = item_text_node.value;
      if (item_text.length &gt; 0) {
          var item_template = document.getElementById('item-template-container');
          var item_clone = item_template.cloneNode(true);
          item_clone.removeAttribute('id');
          var random_id = (new Date().getTime() +
              parseInt(Math.random(0, 1000) * 1000))
          item_clone.setAttribute('id', random_id);
          var clone_text = item_clone.getElementsByClassName('item-text')[0];
          clone_text.textContent = item_text;
          // reset the value
          item_text_node.value = '';
          var item_list = document.getElementById('item-list');
          item_list.appendChild(item_clone);
      } else {
          alert('No text?? Add some text!');
      } }
  
  function add_item_2() {
      var item_text_node = document.getElementsByName('add-item-text-2')[0]
      var item_text = item_text_node.value;
      if (item_text.length &gt; 0) {
          var item_template = document.getElementById('item-template-container');
          var item_clone = item_template.cloneNode(true);
          item_clone.removeAttribute('id');
          var random_id = (new Date().getTime() +
              parseInt(Math.random(0, 1000) * 1000))
          item_clone.setAttribute('id', random_id);
          var clone_text = item_clone.getElementsByClassName('item-text')[0];
          clone_text.textContent = item_text;
          // reset the value
          item_text_node.value = '';
          var item_list = document.getElementById('item-list-2');
          item_list.appendChild(item_clone);
      } else {
          alert('No text?? Add some text!');
      } }
  
  function onEnterInInput() {
      var e = e || window.event;
      if (e.keyCode == 13) {
          add_item()
      } }
  
  function sample_data() {
      for(var i=0;i&lt;10;i++){
          var item_text_node = document.getElementsByName('add-item-text')[0]
          item_text_node.value = i;
          var item_text_node_2 = document.getElementsByName('add-item-text-2')[0]
          item_text_node_2.value = i;
          add_item();
          add_item_2();
      } }
  
  window.onload = function () {
      sample_data(); }
  </code></pre>
  
  <p>HTML code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;List task&lt;/title&gt;
      &lt;script type="text/javascript" src="list-task.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" type="text/css" href="list-task.css"&gt;
      &lt;script&gt;
        document.write('&lt;script src="http://' + (location.host || 'localhost').split(':')[0] +
        ':35729/livereload.js?snipver=1"&gt;&lt;/' + 'script&gt;')
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="container"&gt;
          &lt;div id="list-1"&gt;
              &lt;div id="add-item-div"&gt;
                  &lt;input type="text" name="add-item-text" onkeypress="onEnterInInput(event);"&gt;
                  &lt;button id="add-item" onclick="add_item(event)"&gt;Add Item&lt;/button&gt;
              &lt;/div&gt;
              &lt;div id="item-list"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="list-2"&gt;
              &lt;div id="add-item-div-2"&gt;
                  &lt;input type="text" name="add-item-text-2" onkeypress="onEnterInInput(event);"&gt;
                  &lt;button id="add-item-2" onclick="add_item_2(event)"&gt;Add Item&lt;/button&gt;
              &lt;/div&gt;
              &lt;div id="item-list-2"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="item-template-container" class="item-template-container" draggable="true" ondragstart="listItemDragStartHandler(event);" ondragover="dragoverHandler(event);" ondragend="dragEndHandler(event);" ondragleave="dragLeaveHandler(event);" ondrop="onDropHandler(event);"&gt;
              &lt;div class="item-list-element"&gt;
                  &lt;div class="item-text"&gt;&lt;/div&gt;
                  &lt;div class="delete-item-div"&gt;
                      &lt;button class="delete-item" onclick="delete_item(event);"&gt;Delete&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="empty-node"&gt;&amp;nbsp;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Video describing the bug: <a href="https://www.youtube.com/watch?v=Uz_ukKdg1O0&amp;feature=youtu.be" rel="noreferrer">https://www.youtube.com/watch?v=Uz_ukKdg1O0&amp;feature=youtu.be</a></p>
  
  <p><strong>Note</strong>: I observed the behavior on Mac, not sure about Linux and Windows.</p>