DnD

from : http://playground.html5rocks.com/#drag_and_drop

HTML

<ol id="drag-zone">
<li><img src ="http://placekitten.com/100/100" draggable class="copy" /></li> 
<li><span class="draggable-text" draggable>Select text and drag (original text will be dropped)</span > </li> 
<li><span class="overwrite" class="draggable-text" draggable>Select text and drag (dragged text data will be altered from original)</span></li> 
</ol>
<div id="drop-zone">Drop Area</div>
<div id ="drop-data">Source Data</div>

CSS

#drag-zone { list-style: none; width: 100%; }
#drag-zone li { float: left; width: 100px; margin: 10px; }
#drag-zone:after { clear:both; content:""; display: block; }

#drag-zone li * {
    border: 4px solid #888;
    display: block;
    margin: 10px 0;
}

#drop-zone, #drop-data {
    padding: 40px;
    border: 5px solid #888;

    min-height: 100px;
    overflow: auto;
}

#drop-zone.hovering {
    border: 5px solid #aaa;
    background-color: rgba(255, 0, 0, 0.199219);
}
#drop-data { 
    background-color: #eee;
    font-family: Monospace;
    -ms-word-wrap: break-word;
    word-wrap: break-word;
}
.datatypes {
    font-weight: bold;
}
.draggable-text {
    padding: 5px;
}

JavaScript

(function() {
    var dragZone = document.querySelector('#drag-zone');
    var dropZone = document.querySelector('#drop-zone');
    dragZone.addEventListener('dragstart', function(event) {
        if (event.target.className) { // img case
            event.dataTransfer.effectAllowed = event.target.className;
            event.target.style.border = "4px solid #cc3300";
        } else { // text case
            if (event.target.parentNode.className == 'overwrite') {
                event.dataTransfer.setData("text", "<strong>Overwritten Content</strong>");
            }
            event.target.parentNode.style.border = "4px solid #cc3300";
        }
        return true;
    }, true);

    dragZone.addEventListener('dragend', function(event) {
        if (event.target.className) { // img case
            event.target.style.border = "4px solid #888";
        } else { // text case
            event.target.parentNode.style.border = "4px solid #888";
        }
        return true;
    }, true);

    dropZone.addEventListener('dragenter', function(event) {
        if (event.preventDefault) event.preventDefault();
        event.dataTransfer.dropEffect = 'copy';
        this.className = 'hovering';
        return false;
    }, false);

    dropZone.addEventListener('dragover', function(event) {
        if (event.preventDefault) event.preventDefault(); // allows us to drop
        event.dataTransfer.dropEffect = 'copy';
        return false;
    }, false);

    dropZone.addEventListener('dragleave', function(event) {
        if (event.preventDefault) event.preventDefault(); // allows us to drop
        this.className = '';
        return false;
    }, false);

    dropZone.addEventListener('drop', function(event) {
        if (event.preventDefault) event.preventDefault();
        var imgPassed = null;
        var dropdata = document.querySelector('#drop-data');
        var types = event.dataTransfer.types;
        document.querySelector('#drop-data').textContent = '';
    ...