SOURCE

var demo = document.getElementById('demo'),
    demo2 = document.getElementById('demo2');
    demo.ondragstart = dragStart;
    demo.ondragover = allowDrop;
    demo.ondrop = drop;

    demo2.ondragstart = dragStart;
    demo2.ondragover = allowDrop;
    demo2.ondrop = drop;

var dragObj = null;
function allowDrop(e) {
  e.preventDefault();
}
function dragStart(e) {
  var tar = e.target;
  dragObj = tar;
  if (tar.tagName.toLowerCase() == 'li') {
  }
}
function drop(e) {
  allowDrop(e);
  var tar = e.currentTarget;
  this.appendChild(dragObj);
  dragObj = null;
}

<ul id="demo">
  <li draggable="true">
    1
  </li>
  <li draggable="true">
    2
  </li>
  <li draggable="true">
    3
  </li>
  <li draggable="true">
    4
  </li>
  <li draggable="true">
    5
  </li>
</ul>
<ul id="demo2">
</ul>

ul {
  float: left;
  margin-left: 10px;
  min-height: 100px;
  min-width: 200px;
  background: #eee;
}

li {
  margin-top: 10px;
  min-height: 2em;
  width: 200px;
  background: #abcded;
}