On style sheets, drag and drop changes for all dropzones (file upload)

Question

I have several dropzones for uploading files to a web page.

How to select all dropzone elements as soon as the file is dragged into the browser so that the user knows where to delete it? And when the file is dragged over one of the dropzones, I need to add an extra class to indicate that the user can free the file

Update

kurideja pointed me in the right direction to dragster

https://github.com/bensmithett/dragster

Now it almost works :)

• If you drag one dropzone and drag it back without releasing the file, all dropzones will be hidden.

http://jsfiddle.net/L7v2f96z/9/

HTML

<div class="dropzone"></div> <div class="dropzone"></div> 

Javascript

 // Add/remove class when file is dragged over the dropzone. Hover effect $('.dropzone').dragster({ enter : function(){ $(this).show().addClass('hover'); }, leave : function(){ $(this).hide().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 = $(window).dragster({ enter : function(){ $('.dropzone').show(); }, leave : function(){ $('.dropzone').hide(); } }) // Prevent defaults (file is openened in the browser) if user drops file outside a dropzone .on('dragover', function(e){ e.preventDefault(); }) .on('drop', function(e){ e.preventDefault(); w.trigger('dragleave'); }); 

CSS

 .dropzone { width:200px; height:200px; background:#fff; display:none; border:2px dashed rgba(0,0,0,0.5); box-shadow:0 2px 5px rgba(0,0,0,0.1), inset 0 0 40px rgba(0,0,0,0.1); border-radius:2px; margin:10px; } .dropzone.hover { background:#e3e3e3; } 

Answer 1

The main problem was that after exiting the dropzone, the dragster activated leave twice on both .dropzone and window . Just adding e.stopPropagation () solves the problem. There are several more fixes (removed show () and hide () inside dragzone dragster). The code in the script and also below:

 // Add/remove class when file is dragged over the dropzone. Hover effect $('.dropzone').dragster({ enter: function() { $(this).addClass('hover'); }, leave: function(e) { e.stopPropagation(); //-- Critical point $(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 = $(window).dragster({ enter: function() { $('.dropzone').show(); }, leave: function() { $('.dropzone').hide(); } }) // 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'); }); 

Answer 2

You can use e.originalEvent.pageX and e.originalEvent.pageY when dragging and checking if this is in the box. In this example, I copied the dropzone and I know the width and height of the div so that I can hard code the condition. You will have to come up with a way to store the position (above and below) of the areas of the fall zone and use it for comparison.

 var drag_timer; $(document).on('dragover', function (e) { var dt = e.originalEvent.dataTransfer; if (dt.types && (dt.types.indexOf ? dt.types.indexOf('Files') != -1 : dt.types.contains('Files'))) { if (e.originalEvent.pageX <= 200 && e.originalEvent.pageY <= 200) { $('.dropzone').removeClass('highlight'); $('.dropzone:eq(0)').addClass('highlight'); } else if (e.originalEvent.pageX <= 400 && e.originalEvent.pageY <= 400) { $('.dropzone').removeClass('highlight'); $('.dropzone:eq(1)').addClass('highlight'); } else { $('.dropzone').removeClass('highlight'); } $('.dropzone').show(); window.clearTimeout(drag_timer); } }) .on('dragleave', function (e) { drag_timer = window.setTimeout(function () { $('.dropzone').hide(); }, 50); }); 

Demo script

Answer 3

Some drag and drop events are fired on EVERY element, so basically there is not a single continuous drag and drop, and the drag and drop sequence over all elements under the mouse.

Just use this plugin: http://javascript.hew.io/bensmithett/dragster

Answer 4

You can use the target member to get the element you want:

 var drag_timer; $(document).on('dragover', function(e){ var dt = e.originalEvent.dataTransfer; if(dt.types && (dt.types.indexOf ? dt.types.indexOf('Files') != -1 : dt.types.contains('Files'))){ $('.dropzone').show(); window.clearTimeout(drag_timer); } }) .on('dragleave', function(e){ drag_timer = window.setTimeout(function(){ $('.dropzone').hide(); }, 50); }); $('.dropzone') .on('dragenter', function(e){ $(e.originalEvent.target).addClass('highlight'); }) .on('dragleave', function(e){ $(e.originalEvent.target).removeClass('highlight'); }); 

Fiddle: http://jsfiddle.net/mzcqxff33/

Answer 5

My solution would be very similar to your aproach. When the file is brought into the window, add the css class to the element that contains all the drag zones (body, if necessary). Then you can adjust your drag zones accordingly:

 $(document).on('dragover', function(e){ var dt = e.originalEvent.dataTransfer; if(dt.types && (dt.types.indexOf ? dt.types.indexOf('Files') != -1 : dt.types.contains('Files'))){ $('body').addClass('dragging'); // Adding a class to the body } }) .on('dragleave', function(e){ $('body').removeClass('dragging') }); 

css will be:

 /* style the drop-zone */ .dropzone { height:200px; width:200px; display:none; border:2px dashed black; } /* show the dropzone when file is dragged into window */ body.dragging .dropzone{ display:block; } /* highlight box when hovered but only when file is dragged */ body.dragging .dropzone:hover{ background:gray; } 

If this is not what you wanted, please tell me in the comment;)

EDIT Of course you must delete the class when the file is deleted

 $(document).on('drop', function(event) { $('body').removeClass('dragging'); } 

Answer 6

• IE11 error caused by dt.types.indexOf , e.originalEvent.dataTransfer.types is a DOMStringList object in ie. Therefore, you use dt.types.contains instead of dt.types.indexOf .

The following works:

 var drag_timer; $(document).on('dragover', function(e) { var dt = e.originalEvent.dataTransfer; if (dt.types != null && (dt.types.indexOf ? dt.types.indexOf('Files') != -1 : (dt.types.contains('Files') || dt.types.contains('application/x-moz-file')))) { $('.dropzone').show(); window.clearTimeout(drag_timer); } }) .on('dragleave', function(e) { drag_timer = window.setTimeout(function() { $('.dropzone').hide(); }, 25); }); 

 .dropzone { height: 100px; width: 100px; background: red; display: none; } 

 <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <div class="dropzone"></div>