HTML5 Drag n Drop List

A simple Drag n Drop list in HTML5

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>
    <div id="2" 
         class="item drop-zone"
         draggable="true"
         ondragstart="drag(event)"
         ondrop="drop(event)"
         ondragover="allowDrop(event)">
       <p>2. Ben</p>
    </div>
    <div id="3" 
         class="item drop-zone" 
         draggable="true"
         ondragstart="drag(event)"     
         ondrop="drop(event)"
         ondragover="allowDrop(event)">
       <p>3. Charles</p>
    </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

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");
    list.insertBefore(document.getElementById(data), e.target.parentNode);
}