title: Drag <li> between two <ul> JS (without jQuery)
body: <p>I am trying to build two ul in JS and HTML and drag li between them. (task to it without using jQuery)  I pretty sure that I do something wrong in </p>
  
  <pre><code>function handleDrop(e)  OR I need to rewrite all.
  </code></pre>
  
  <p>Hope for your help</p>
  
  <p>this is a code that I have.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;body&gt;
  &lt;ul id="columns"&gt;
    &lt;li class="column" draggable="true"&gt;&lt;header&gt;A&lt;/header&gt;&lt;/li&gt;
    &lt;li class="column" draggable="true"&gt;&lt;header&gt;B&lt;/header&gt;&lt;/li&gt;
    &lt;li class="column" draggable="true"&gt;&lt;header&gt;C&lt;/header&gt;&lt;/li&gt;
    &lt;li class="column" draggable="true"&gt;&lt;header&gt;D&lt;/header&gt;&lt;/li&gt;
    &lt;li class="column" draggable="true"&gt;&lt;header&gt;E&lt;/header&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;ul id="columns_1"&gt;
    &lt;li class="column" draggable="true"&gt;&lt;header&gt;Ad&lt;/header&gt;&lt;/li&gt;
    &lt;li class="column" draggable="true"&gt;&lt;header&gt;Bd&lt;/header&gt;&lt;/li&gt;
    &lt;li class="column" draggable="true"&gt;&lt;header&gt;Cd&lt;/header&gt;&lt;/li&gt;
    &lt;li class="column" draggable="true"&gt;&lt;header&gt;Dd&lt;/header&gt;&lt;/li&gt;
    &lt;li class="column" draggable="true"&gt;&lt;header&gt;Ed&lt;/header&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>AND JS</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
  var dragSrcEl = null;
  
  function handleDragStart(e) {
    // Target (this) element is the source node.
    dragSrcEl = this;
  
    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text/html', this.outerHTML);
  
    this.classList.add('dragElem');
  }
  function handleDragOver(e) {
    if (e.preventDefault) {
      e.preventDefault(); // Necessary. Allows us to drop.
    }
    this.classList.add('over');
  
    e.dataTransfer.dropEffect = 'move';  // See the section on the DataTransfer object.
  
    return false;
  }
  
  function handleDragEnter(e) {
       console.log('handleDragEnter');
          e.preventDefault();
  
    // this / e.target is the current hover target.
  }
  
  function handleDragLeave(e) {
    this.classList.remove('over');  // this / e.target is previous target element.
  }
  
  function handleDrop(e) {
    // this/e.target is current target element.
  
    if (e.stopPropagation) {
      e.stopPropagation(); // Stops some browsers from redirecting.
    }
  
    // Don't do anything if dropping the same column we're dragging.
    if (dragSrcEl != this) {
      // Set the source column's HTML to the HTML of the column we dropped on.
      //alert(this.outerHTML);
      //dragSrcEl.innerHTML = this.innerHTML;
      //this.innerHTML = e.dataTransfer.getData('text/html');
      this.parentNode.removeChild(dragSrcEl);
      var dropHTML = e.dataTransfer.getData('text/html');
      this.insertAdjacentHTML('beforebegin',dropHTML);
      var dropElem = this.previousSibling;
      addDnDHandlers(dropElem);
  
    }
    this.classList.remove('over');
    return false;
  }
  
  function handleDragEnd(e) {
    // this/e.target is the source node.
    this.classList.remove('over');
  
    /*[].forEach.call(cols, function (col) {
      col.classList.remove('over');
    });*/
  }
  
  function addDnDHandlers(elem) {
    elem.addEventListener('dragstart', handleDragStart, false);
    elem.addEventListener('dragenter', handleDragEnter, false)
    elem.addEventListener('dragover', handleDragOver, false);
    elem.addEventListener('dragleave', handleDragLeave, false);
    elem.addEventListener('drop', handleDrop, false);
    elem.addEventListener('dragend', handleDragEnd, false);
  
  }
  
  var cols = document.querySelectorAll('#columns .column');
  [].forEach.call(cols, addDnDHandlers);
  cols
  
  
  var cols_1 = document.querySelectorAll('#columns_1 .column');
  [].forEach.call(cols, addDnDHandlers);
  
  &lt;/script&gt;
  </code></pre>