More to the drag and drop folder infra. Some HTML5 drag stuff to supp…

…orting where user drag and rop file from OS to the this div.
mikedeboer · May 19, 2011 · 1b660e0 · 1b660e0
1 parent 6f43b10
commit 1b660e0
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 3 deletions.
diff --git a/tests/dragdrop/dragdrop-in.js b/tests/dragdrop/dragdrop-in.js
@@ -0,0 +1,30 @@
+function onDrop(e) { 
+  e.stopPropagation();
+  e.preventDefault();
+  var dt = e.dataTransfer;
+  var files = dt.files;
+  var count = files.length;
+  for (var i = 0; i < count; i++) {
+    var types = dt.mozTypesAt(i);
+    for (var t = 0; t < types.length; t++) {
+       console.log("Checking all types, type = " + types[t]);
+       if (types[t] == "application/x-moz-file") {
+           try {
+             var data = files[i];
+             console.log("(" + (typeof data) + ") : <" + data + " > " + data.fileName + " " + data.fileSize + "\n");
+             document.getElementById("droparea").innerHTML="<h2>The file name is: " + data.fileName+"</h2>";
+           } catch (i) {
+             console.log("Something wrong");
+           }
+       }
+    }
+  }
+} 
+
+function onDragEnter(e) { 
+
+} 
+
+function onDragLeave(e) { 
+   console.log("Drag leave");
+} 
diff --git a/tests/dragdrop/dragdrop.js → tests/dragdrop/dragdrop-out.js b/tests/dragdrop/dragdrop.js → tests/dragdrop/dragdrop-out.js
@@ -33,3 +33,4 @@ function dragEnable() {
     dragItems[i].addEventListener("dragend", handleDragEnd, true);
   }
 }
+
diff --git a/tests/dragdrop/index.html b/tests/dragdrop/index.html
@@ -1,21 +1,52 @@
 <html>
   <head>
-    <title>Drag files to the OS </title>
+    <title>Drag files to the OS, Drag files from the OS to here </title>
     <style type="text/css" media="screen">
     .fileitem { 
         border:1px solid black;
         padding:.51em;
         margin-bottom:.5em;
     } 
+    body { 
+	margin:0;
+	padding:0;
+        display: -moz-box;
+	width:100%;
+        height:100%;
+        -moz-box-orient: horizontal;
+    } 
+    .panel { 
+        display: -moz-box;
+        -moz-box-orient: vertical;
+        -moz-box-flex: 1;
+	margin:1em;
+	padding:1em;
+        background-color:#ccc; 
+        width:100%; 
+        height:100%;
+	overflow:auto;
+    } 
     </style>
 
   </head>
   <body >
-     <h2>Drag a file from here:</h2>
+     <!-- this panel deals with HTML5 https://developer.mozilla.org/En/DragDrop/Drag_and_Drop --> 
+     <div class="panel" id="droparea" 
+                ondragexit="onDragLeave(event);"
+                ondragenter="onDragEnter(event);"
+                ondragover="event.stopPropagation(); event.preventDefault();"
+                ondrop="onDrop(event);" >
+
+     <h2>This is nothing, but you can drop a file from a OS folder to here!</h2>
+     </div>
+     <div class="panel">
+     <h2>The following is your desktop!. You can drag things out of it to a folder</h2>
      <ol id="files">
      </ol>  
+     </div>
   </body>
-  <script type="text/javascript" src="dragdrop.js"></script>
+  <script type="text/javascript" src="dragdrop-out.js"></script>
+  <script type="text/javascript" src="dragdrop-in.js"></script>
   <script type="text/javascript" charset="utf-8">
 
     var desktopPath = require('app-paths').desktopDir;