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

i implementing drag , drop 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);     // initial add-drop     droparea.addeventlistener("drop", function (evt) {         dostuff();         this.classname = "";         evt.preventdefault();         evt.stoppropagation();      }, false);   } 

there times when users dropped stuff not #droparea.

i want prevent them doing that.

what should do?

you need add noop dragover , drop handler document. prevent default browser behavior of replacing current page dropped file.

see here demo

// handle dropping on non-droparea     document.addeventlistener("drop", cancelevent, false); document.addeventlistener("dragover", cancelevent, false);  function cancelevent(evt) {     evt.preventdefault();     evt.stoppropagation(); }