Drag Overlay Demo

Answering http://stackoverflow.com/questions/8951051/event-propagation-overlay-and-drag-and-drop-events/8966262#8966262

by Scott

HTML

<div id="dragMessage">Drop a File to Upload</div>
<div id="dragOverlay"></div>

CSS

body {
        position: absolute;
        height: auto;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0;
        padding: 0;
    }

    #dragMessage {
        display:none;
        position: absolute;        
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url(bg.png) repeat-x top right, url(bg.png) repeat-x bottom left, url(bg.png) repeat-y top right, url(bg.p
ng) repeat-y bottom left;
        z-index:1;
    }
    #dragOverlay {
        background:transparent;
        z-index:2;
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:100%;
    }

    body.dragenter #dragMessage {
        display: block;
        background: green;
    }

JavaScript

$('#dragOverlay').on('dragenter', function (e) {
    e.originalEvent.stopPropagation();
    e.originalEvent.preventDefault();
    console.log('dragenter');
    $('body').addClass('dragenter');
});

$('#dragOverlay').on('dragleave', function (e) {
    e.originalEvent.stopPropagation();
    e.originalEvent.preventDefault();
    console.log('dragleave');
    $('body').removeClass('dragenter');
});