Wednesday, September 5, 2018

(jQuery) div styles for drag and drop files


// Dragster minified https://github.com/catmanjan/jquery-dragster
!function(e){e.fn.dragster=function(r){var n=e.extend({enter:e.noop,leave:e.noop},r);return this.each(function(){var r=!1,t=!1,a=e(this);a.on({dragenter:function(){return r?t=!0:(r=!0,void a.trigger("dragster:enter"))},dragleave:function(){t?t=!1:r&&(r=!1),r||t||a.trigger("dragster:leave")},"dragster:enter":n.enter,"dragster:leave":n.leave})})}}(jQuery);

function dragging() {
  //  Add/remove class when file is dragged over the dropzone. Hover effect
  jQuery('.ar_facility_edit-theme .plup-filelist').dragster({
      enter : function(){
          jQuery(this).addClass('hover');
      },
      leave : function(e){
          e.stopPropagation();
          jQuery(this).removeClass('hover');
      }
  });

  // Show/hide dropzones until a file is dragged into the browser window. Hide dropzones after file is dropped or dragging is stopped
  var w = jQuery(window).dragster({
      enter : function(){
          jQuery('.ar_facility_edit-theme .plup-filelist').addClass('hover');
      },
      leave : function(){
          jQuery('.ar_facility_edit-theme .plup-filelist').removeClass('hover');
      }
  })
  // Prevent defaults (file is openened in the browser) if user drop file outside a dropzone
  .on('dragover', function(e){
      e.preventDefault();
  })
  .on('drop', function(e){
      e.preventDefault();
      w.trigger('dragleave');
  });
}

//call to function on load
jQuery(window).load(function(){
  dragging();
});

No comments:

Post a Comment