Drag And Drop List

HTML

<ul >
  <li class="draggable">
    Lista 1
  </li>
  <li class="draggable">
    Lista 2
  </li>
</ul>

CSS

li{
  list-style-type: none;
  border: 1px solid black;
  padding: 1px;
  margin-bottom: 1px;
  cursor: pointer;
  position:relative;
}
li:HOVER{
  background-color: #DCE9EB;
}

JavaScript

var selected = null,
y_pos = 0,
y_elem = 0;


function drag_init(elem) {    
    selected = elem;    
    y_elem = y_pos - selected.closest('ul').offsetTop;
}

function move_elem(e) {    
    y_pos = document.all ? window.event.clientY : e.pageY;
    if (selected !== null) {        
        selected.style.top = (y_pos - y_elem) + 'px';
    }
}

function destroy() {
    selected = null;
}

document.querySelectorAll('.draggable').forEach(function(el) {
		el.onmousedown = function () { 
      drag_init(this);
      return false;
		};
});

document.onmousemove = move_elem;
document.onmouseup = destroy;