HTML5 Drag n Drop List

A simple Drag n Drop list in HTML5. With thanks to Kiran Reddy. http://stackoverflow.com/questions/29553959/why-does-html5-drag-n-drop-target-child-sortable-list/29554280#29554280

by Ben Grunfeld

HTML

<div class="list" id="list">
    <div id="1" 
         class="item drop-zone" 
         draggable="true"
         ondragstart="drag(event)"     
         ondrop="drop(event)"
         ondragover="allowDrop(event)">
       <p>1. Adam</p>
             <div><p>Atom</p></div>
    </div>
    <div id="2" 
         class="item drop-zone"
         draggable="true"
         ondragstart="drag(event)"
         ondrop="drop(event)"
         ondragover="allowDrop(event)">
       <p>2. Ben</p>
             <div><p>Broke</p></div>
    </div>
    <div id="3" 
         class="item drop-zone" 
         draggable="true"
         ondragstart="drag(event)"     
         ondrop="drop(event)"
         ondragover="allowDrop(event)">
       <p>3. Charles</p>
             <div><p>Crack</p></div>
    </div>
</div>

CSS

.item {
    display:block;
    width: 150px;
    background: darkblue;
    color: white;
    margin-bottom:15px;
}

.item p {
    padding: 5px;
    margin:0;
    text-align:center;
}

JavaScript

// Bug currently exists if you drop the element inside a grandchild. 
// Will find a fix once I get some sleep.

function allowDrop(e) {
    e.preventDefault();
}

function drag(e) {
    e.dataTransfer.setData("text", e.target.id);
}

function drop(e) {
    e.preventDefault();

    var data = e.dataTransfer.getData("text");
    var list = document.getElementById("list");
    // PROBEM: If you drag 1. Adam onto Broke, it will error out
    // You need to find the true parentId by travelling up the DOM
    // until you find it. This is a known issue in HTML5 DnD
    list.insertBefore(document.getElementById(data), e.target.parentNode);
}