Q:

How to prevent people from dropping in non-droppable elements?

I am implementing drag and drop this way.
<?php echo $this->Html->script('modernizr/2.5.3/modernizr.min.js', array('block' => 'scriptTop')); ?>

$(document).ready(function () {
    dropArea = document.getElementById("droparea");

    dropArea.addEventListener("dragleave", function (evt) {
        var target = evt.target;

        if (target && target === dropArea) {
            this.className = "";
        }

        dropArea.className = "";
        evt.preventDefault();
        evt.stopPropagation();

    }, false);

    dropArea.addEventListener("dragenter", function (evt) {
        this.className = "over";
        evt.preventDefault();
        evt.stopPropagation();

    }, false);

    dropArea.addEventListener("dragover", function (evt) {

        evt.preventDefault();
        evt.stopPropagation();

    }, false);
    // this is the initial add-drop
    dropArea.addEventListener("drop", function (evt) {
        doStuff();
        this.className = "";
        evt.preventDefault();
        evt.stopPropagation();

    }, false);
  }

There are times when my users dropped stuff NOT into #droparea.
I want to prevent them from doing that.
What should I do?

A:

You need to add a noop dragover and drop handler for your document.  This will prevent the default browser behavior of replacing current page with dropped file.
See here for a demo
// Handle dropping on non-droparea    
document.addEventListener("drop", cancelEvent, false);
document.addEventListener("dragover", cancelEvent, false);

function cancelEvent(evt) {
    evt.preventDefault();
    evt.stopPropagation();
}

