]> git.mxchange.org Git - friendica-addons.git/blobdiff - js_upload/file-uploader/tests/test-drop-zone.htm
addon repository relocated
[friendica-addons.git] / js_upload / file-uploader / tests / test-drop-zone.htm
diff --git a/js_upload/file-uploader/tests/test-drop-zone.htm b/js_upload/file-uploader/tests/test-drop-zone.htm
new file mode 100644 (file)
index 0000000..d7f0acc
--- /dev/null
@@ -0,0 +1,48 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <style>
+        .drop-zone {height:100px; width:256px; background:gray; margin:20px;}
+    </style>  
+    <script src="jquery-1.4.2.min.js" type="text/javascript"></script>
+    <script src="../client/fileuploader.js" type="text/javascript" ></script>    
+    <script>
+    
+function createDropZone(selector){
+    var element = $(selector)[0];  
+          
+    new qq.UploadDropZone({
+        element: element,
+        onEnter: function(){
+            console.log('enter')
+            $(element).css('background', 'green');
+        },
+        onLeave: function(){
+            console.log('leave')
+        },
+        onLeaveNotDescendants: function(){
+            console.log('onLeaveNotDescendants')
+            $(element).css('background', 'gray');
+        },
+        onDrop: function(e){
+            $(element).css('background', 'gray');
+            console.log('drop');
+            console.log(e.dataTransfer.files);
+        } 
+    });    
+}    
+
+jQuery(function(){
+    createDropZone('#drop-zone1');
+    createDropZone('#drop-zone2');                
+});
+
+    </script>      
+</head>
+<body> 
+    <div id="drop-zone1" class="drop-zone"><p>drop-zone1</p></div>
+    <div id="drop-zone2" class="drop-zone"><p>drop-zone2</p></div>          
+</body> 
+</html>
+
+