js_upload/file-uploader/tests/test-drop-zone.htm

   1 <!DOCTYPE HTML>
   2 <html>
   3 <head>
   4     <style>
   5         .drop-zone {height:100px; width:256px; background:gray; margin:20px;}
   6     </style>
   7     <script src="jquery-1.4.2.min.js" type="text/javascript"></script>
   8     <script src="../client/fileuploader.js" type="text/javascript" ></script>
   9     <script>
  10
  11 function createDropZone(selector){
  12     var element = $(selector)[0];
  13
  14     new qq.UploadDropZone({
  15         element: element,
  16         onEnter: function(){
  17             console.log('enter')
  18             $(element).css('background', 'green');
  19         },
  20         onLeave: function(){
  21             console.log('leave')
  22         },
  23         onLeaveNotDescendants: function(){
  24             console.log('onLeaveNotDescendants')
  25             $(element).css('background', 'gray');
  26         },
  27         onDrop: function(e){
  28             $(element).css('background', 'gray');
  29             console.log('drop');
  30             console.log(e.dataTransfer.files);
  31         }
  32     });
  33 }
  34
  35 jQuery(function(){
  36     createDropZone('#drop-zone1');
  37     createDropZone('#drop-zone2');
  38 });
  39
  40     </script>
  41 </head>
  42 <body>
  43     <div id="drop-zone1" class="drop-zone"><p>drop-zone1</p></div>
  44     <div id="drop-zone2" class="drop-zone"><p>drop-zone2</p></div>
  45 </body>
  46 </html>
  47
  48