Basic drag and drop functionality added.

index.js

@@ -10,36 +10,97 @@ $(document).ready(function () {
         {"file": "icon1.png", "colorCount": "4", "class": "fbIcon"}
     ]};
 
+    // Setup the drag and drop behavior
+    var $dropZone = $('#dropZone');
+
+    var dragEnter = function( evt ){
+      evt.stopPropagation();
+      evt.preventDefault();
+      $dropZone.addClass('dragging');
+    };
+
+    var dragLeave = function( evt ){
+      evt.stopPropagation();
+      evt.preventDefault();
+      $dropZone.removeClass('dragging');
+    };
+
+    var dragOver = function( evt ){
+      evt.stopPropagation();
+      evt.preventDefault();
+    };
+
+    var drop = function( evt ){
+      evt.stopPropagation();
+      evt.preventDefault();
+      $dropZone.removeClass('dragging');
+      
+      var dt = evt.originalEvent.dataTransfer;
+      var files = dt.files;
+
+      handleFile( files );
+    };
+
+    var displayColors = function( image ) {
+      var $image = $(image);
+      var imageSection = $image.closest('.imageSection');
+      var appendColors = function (colors, root) {
+          $.each(colors, function (index, value) {
+              var swatchEl = $('<div>', {'class': 'swatch'})
+                  .css('background-color', 'rgba('+ value +', 1)');
+              root.append(swatchEl);
+          });
+      };
+
+      // Dominant Color
+      var dominantColor = getDominantColor(image);
+      var dominantSwatch = imageSection.find('.dominantColor .swatches');
+      appendColors([dominantColor], dominantSwatch);
+
+      // Palette
+      var colorCount = $image.attr('data-colorcount') ? $image.data('colorcount') : 10;
+      var medianPalette = createPalette(image, colorCount);
+      var medianCutPalette = imageSection.find('.medianCutPalette .swatches');
+      appendColors(medianPalette, medianCutPalette);
+    };
+
+    function handleFile(files) {
+      var file = files[0];
+      var imageType = /image.*/;
+
+      if (file.type.match(imageType)) {
+        var img = document.createElement("img");
+        img.classList.add("targetImage");
+        img.width = 400;
+        img.height = 300;
+        img.file = file;
+        $dropZone.append(img);
+         
+        var reader = new FileReader();
+        reader.onload = function(e){
+            img.src = e.target.result;
+            displayColors( img );
+          };
+        reader.readAsDataURL(file);
+      }
+    }
+
+    $dropZone
+      .on('dragenter', dragEnter)
+      .on('dragleave', dragLeave)
+      .on('dragover', dragOver)
+      .on('drop', drop);
+
     var html = Mustache.to_html($('#template').html(), imageArray);
     $('#main').append(html);
 
     // Use lettering.js to give letter by letter styling control for the h1 title
     $("h1").lettering();
 
-
     // For each image:
     // Once image is loaded, get dominant color and palette and display them.
     $('img').bind('load', function (event) {
-        var image = event.target;
-        var $image = $(image);
-        var imageSection = $image.closest('.imageSection');
-        var appendColors = function (colors, root) {
-            $.each(colors, function (index, value) {
-                var swatchEl = $('<div>', {'class': 'swatch'})
-                    .css('background-color', 'rgba('+ value +', 1)');
-                root.append(swatchEl);
-            });
-        };
-
-        // Dominant Color
-        var dominantColor = getDominantColor(image);
-        var dominantSwatch = imageSection.find('.dominantColor .swatches');
-        appendColors([dominantColor], dominantSwatch);
-
-        // Palette
-        var colorCount = $image.attr('data-colorcount') ? $image.data('colorcount') : 10;
-        var medianPalette = createPalette(image, colorCount);
-        var medianCutPalette = imageSection.find('.medianCutPalette .swatches');
-        appendColors(medianPalette, medianCutPalette);
+      var image = event.target;
+      displayColors( image );
     });
-});
+});