Tutorial for HTML5 drag&drop - sortable list

Question

Do anyone know a really good tutorial for HTML5 drag&drop? Im making a toDo-list and I want to be able to reorder/sort it with this API. I\'ve been googling for it like a ma

Answer 1

If you're going with the solution by adamf (Mar 10 '15 at 11:16), and want to use it on table rows, replace the dragenter function to the following:

function dragenter(e) {
    var target = e.target;
    while (target.parentNode.tagName != 'TBODY') {
        target = target.parentNode;
    }

    if (isbefore(source, target)) {
        target.parentNode.insertBefore(source, target);
    }
    else {
        target.parentNode.insertBefore(source, target.nextSibling);
    }
}

This way the target will only apply for TR elements, and not any of their child elements.

The same thing would apply for ul > li strunctures, if the li elements have children.

If there are img child elements, add a draggable="false" attribute to each.