Pure Javascript Drag n Drop

Question

I’m trying to make a pure Drag'n Drop with Javascript:

Example

Two mistakes if I can’t solve:

1 - When I drag the List 2 it always puts the element down the mouse and not on top.

2 - When I try to catch the element by Class can’t.

Obs: For Id he can drag normally.

Answer 1

Try this:

In drag init you put like this:

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

And the document.getElementClassName you replaced by:

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

https://jsfiddle.net/8vzj322e/10/