Drag & Drop

drop.js

(function($) {
  
  $.fn.droparea = function() {
    return this.each(function() {

      $(this).on({
        'dragenter, dragleave' : function(e) {
          e.stopPropagation();
          e.preventDefault();
          return false;
        },
        'draghover' : function(e) {
          e.originalEvent.dataTransfer.dropEffect = 'copy';
          e.stopPropagation();
          e.preventDefault();
          return false;
        }
      });

    });
    
  };

  $.fn.draghover = function() {
    return this.each(function() {

      var collection = $();
      var self = $(this);

      self.on({
        'dragenter' : function(e) {

          if(collection.size() === 0) self.trigger('draghoverstart');
          collection = collection.add(e.target);
        }, 
        'dragleave' : function(e) {
          // timeout is needed because Firefox 3.6 fires the dragleave event on
          // the previous element before firing dragenter on the next one
          setTimeout( function() {
            collection = collection.not(e.target);
            if(collection.size() === 0) self.trigger('draghoverend');
          }, 1);
        }

      });

    });

  };

})(jQuery);


var droparea = $('.drop-area');

droparea.droparea().draghover().on({
  'draghoverstart' : function() {
    $(this).addClass('over');
  },
  'draghoverend' : function() {
    $(this).removeClass('over');
  },
  'drop' : function(e) {

    $(this).removeClass('over');

    e.preventDefault();
    e = e.originalEvent;

  }
});