Commits

David Lin  committed e783cba

drag-and-drop

  • Participants
  • Parent commits 3c80286

Comments (0)

Files changed (2)

File www/js/app/main.js

 define(function (require) {
   var zepto = require('zepto');
   zepto(function($){
+    // Load Template
     var html = require('text!./templates/invert.html');
     $(document.body).html(html);
+    // Setup Drag-and-Drop
+    $(document).on("dragenter", function(e){
+      e.stopPropagation();
+      e.preventDefault();
+    }).on("dragover", function(e){
+      e.stopPropagation();
+      e.preventDefault();
+    }).on("drop", function(e){
+      e.stopPropagation();
+      e.preventDefault();
+      var files = e.dataTransfer.files;
+      if (files.length != 1) { return; }
+      var file = files[0];
+      if (!file.type.match(/image.*/)) { return; }
+      var images = $("#source-image");
+      images.attr('file', file);
+      var reader = new FileReader();
+      reader.onload = function(e){ images.attr('src', e.target.result); }
+      reader.readAsDataURL(file);
+    });
   });
 });

File www/js/app/templates/invert.html

 <body>
   <p>Hello World</p>
   <div>
-    <form>
-    </form>
   </div>
   <div id="source-area">
-    <canvas id="source-canvas">
-    </canvas>
+    <img id="source-image" src="img/lena.png"></img>
   </div>
   <div id="output-area">
     <canvas id="output-canvas">