<div id="target" class="well">
    <h4>Drop Here: <span id="count">0</span></h4>
</div>

<div id="source" draggable="true" class="well"><h4>Drag Me</h4></div>

<div class="well well-small">Effect reported in dragEnd: 
    <span id="msg"></span></div>

<div class="row-fluid">
    <div class="span6">
        <h5>Source: effectAllowed</h5>

        <input id="copy-allowed" type="radio" 
            name="allowed" checked="true" value="copy" /> 
        <label for="copy-allowed">copy</label>

        <input id="move-allowed" type="radio" 
            name="allowed" value="move" />
        <label for="move-allowed">move</label>

        <input id="link-allowed" type="radio" 
            name="allowed" value="link" />
        <label for="link-allowed">link</label>

        <input id="none-allowed" type="radio" 
            name="allowed" value="none" />
        <label for="none-allowed">none</label>

        <input id="copyLink-allowed" type="radio" 
            name="allowed" value="copyLink" />
        <label for="copyLink-allowed">copyLink</label>

        <input id="linkMove-allowed" type="radio" 
            name="allowed" value="linkMove" />
        <label for="linkMove-allowed">linkMove</label>

        <input id="all-allowed" type="radio" 
            name="allowed" value="all" />
        <label for="all-allowed">all</label>

        <input id="uninitialized-allowed" type="radio" 
            name="allowed" value="uninitialized" />
        <label for="uninitialized-allowed">uninitialized</label>
    </div>
    <div class="span6">
        <h5>Target: dropEffect</h5>

        <input id="copy-effect" type="radio" name="effect" checked value="copy" /> 
        <label for="copy-effect">copy</label>

        <input id="move-effect" type="radio" name="effect" value="move" />
        <label for="move-effect">move</label>

        <input id="link-effect" type="radio" name="effect" value="link" />
        <label for="link-effect">link</label>

        <input id="none-effect" type="radio" name="effect" value="none" />
        <label for="none-effect">none</label>
    </div>
    
</div>

/* none */

var cancel = function(e) {
    if (e.preventDefault) e.preventDefault();
    if (e.stopPropagation) e.stopPropagation();
    return false;
};

var dragLeave = function(e) {
    this.classList.remove('over');
};

var dragOver = function(e) {
    cancel(e);
    var element = document.querySelector('input[name="effect"]:checked');
    e.dataTransfer.dropEffect = element.value;
    this.classList.add('over');
};

var dropped = function(e) {
    cancel(e);

    var
    countElement = document.getElementById('count'),
    count = countElement.innerText;

    count++;

    countElement.innerText = count;
    target.classList.remove('over');
};

var source = document.getElementById('source');
source.addEventListener('dragstart', dragStart, false);
source.addEventListener('dragend', dragEnd, false);

var target = document.getElementById('target');
target.addEventListener('dragenter', cancel, false);
target.addEventListener('dragover', dragOver, false);
target.addEventListener('dragleave', dragLeave, false);
target.addEventListener('drop', dropped, false);