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 are looking to do this with table rows you need to make a slight change:

https://jsfiddle.net/cmpenney/6rx6u2kf/

    

        
Apples
        
A-Column2
    
    

        
Oranges
        
O-Column2
    
    

        
Bananas
        
B-Column2
    
    

        
Strawberries
        
S-Column2
    




var source;

function isbefore(a, b) {
    if (a.parentNode == b.parentNode) {
        for (var cur = a; cur; cur = cur.previousSibling) {
            if (cur === b) {
                return true;
            }
        }
    }
    return false;
}

function dragenter(e) {
    var targetelem = e.target;
    if (targetelem.nodeName == "TD") {
       targetelem = targetelem.parentNode;   
    }  

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

function dragstart(e) {
    source = e.target;
    e.dataTransfer.effectAllowed = 'move';
}