Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Make drag and drop work correctly.

  • Loading branch information...
commit 28defab7e2c41a73735310ba3cb7649460775942 1 parent adbd5bf
@carsonmcdonald authored
Showing with 23 additions and 21 deletions.
  1. +2 −2 assets/css/styles.css
  2. +17 −15 assets/js/scripts.js
  3. +4 −4 index.html
View
4 assets/css/styles.css
@@ -189,10 +189,10 @@
#main .top .controls a.clear
{ float: right; }
- #drop
+ #dropArea
{ }
- #drop h2
+ #dropArea h2
{ color: #333;
font-family: sans-serif;
font-weight: bold;
View
32 assets/js/scripts.js
@@ -4,26 +4,28 @@
App.MAX_BYTES = 102400; // 100 KB
App.timeline = [];
- $('#dropArea').on('dragenter', function(e){
- e.preventDefault();
- }).on('dragexit', function(e){
- e.preventDefault();
- }).on('dragover', function(e){
+ $('#dropArea').on('dragover', function(e){
+ e.stopPropagation();
e.preventDefault();
}).on('drop', function(e){
+ e.stopPropagation();
e.preventDefault();
- var data = e.dataTransfer,
- files = data.files,
- reader = {};
- for(var file in files){
- // file.fileName
- reader = new FileReader();
+
+ var files = e.originalEvent.dataTransfer.files;
+ for (var i = 0, f; f = files[i]; i++) {
+ console.log(files[i]);
+ var reader = new FileReader();
reader.onloadend = function(e){
- var data = event.currentTarget.result.substr(0, App.MAX_BYTES);
+ var img = document.createElement("img");
+ img.src = e.target.result;
+
+ var li = document.createElement("li");
+ $(img).prependTo(li);
+
+ $(li).prependTo('#inimglist');
};
- reader.readAsBinaryString(file);
- //reader.readAsDataURL(file);
+ reader.readAsDataURL(files[i]);
}
});
-})(window, jQuery);
+})(window, jQuery);
View
8 index.html
@@ -31,7 +31,7 @@
<div id="main" role="main">
<div class="top">
<div class="files">
- <ul class="clearfix">
+ <ul id="inimglist" class="clearfix">
<li><img src="assets/img/temp.png" alt="">
<li><img src="assets/img/temp.png" alt="">
<li><img src="assets/img/temp.png" alt="">
@@ -53,7 +53,7 @@
</div>
</div>
- <div id="drop">
+ <div id="dropArea">
<h2>Drag and Drop files here</h2>
</div>
@@ -66,8 +66,8 @@
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="assets/js/libraries/jquery-1.7.1.min.js">\x3C/script>')</script>
<script src="assets/js/libraries/LZWEncoder.js"></script>
- <script src="assets/js/libraries/NeuQuant.js"></script>
- <script src="assets/js/libraries/GIFEncoder.js"></script>
+ <script src="assets/js/libraries/NeuQuant.js"></script>
+ <script src="assets/js/libraries/GIFEncoder.js"></script>
<script src="assets/js/scripts.js"></script>
</body>
Please sign in to comment.
Something went wrong with that request. Please try again.