D&D Test

by mmarcon

HTML

<div id="d-d-area">
    <p>Drop file here</p>
</div>

CSS

#d-d-area {
    display: none;
    height: 120px;
    background-color: #222;
    border-radius: 20px;
}

#d-d-area p {
    color: #fff;
    font-size: 20px;
    text-align: center;
    margin-top: 50px;
}

JavaScript

$(function() {
    var documentListeners = {}, dropAreaListeners = {}, ns = 'ddtest',
        $destination = $('#d-d-area');
            documentListeners ['dragenter.' + ns] = function (e) {
                e.stopPropagation();
                console.log ('document.dragenter');
                $destination.width($(document).width() - 200);
                $destination.height($(document).height() - 200);
                $destination.fadeTo(0, 0).show();
                $destination.fadeTo('slow', 0.8);
                e.preventDefault();
            };
            /*
            documentListeners ['dragleave.' + ns] = function (e) {
                e.stopPropagation();
                console.log ('document.dragleave');
                $destination.hide();
                e.preventDefault();
            };
            */
            documentListeners ['dragover.' + ns] = function (e) {
                console.log ('document.dragover');
                e.preventDefault();
            };
            /*
            documentListeners ['drop.' + ns] = function (e) {
                e.preventDefault();
            };
            */
            dropAreaListeners ['dragleave.' + ns] = function (e) {
                e.stopPropagation();
                console.log ('droparea.dragleave');
                $destination.css ({
                    'background-color': 'transparent'
                });
                e.preventDefault();
            };
            dropAreaListeners ['dragover.' + ns] = function (e) {d
                e.stopPropagation();
                console.log ('droparea.dragover');
                $destination.css ({
                    'background-color': '#4682b4'
                });
                e.preventDefault();
            };
            dropAreaListeners ['drop.' + ns] = function (e) {
                e.stopPropagation();
                console.log ('droparea.DROP!');
                $destination.css ({
                    'background-color':...