Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

fix Safari drag&drop functionality when cancelling dragover event in parent element #458

Closed
wants to merge 1 commit into from

4 participants

@gonchuki

At least on Safari Windows, if you cancel the dragover event on any parent element of the droppable area (to prevent the browser from opening a file that was dropped outside of our designated area), then Safari completely ignores the drop action. (nothing happens at all)

This patch has been on our production code for at least 4 months so I would say it's quite safe for merging. Not sure if anyone should actually depend on this event bubbling up on the DOM, we don't use the built-in queue plugin so let me know if this patch is no good.

@gonchuki gonchuki fix Safari drag&drop functionality when cancelling the event in docum…
…ent.body (or any parent element of the droppable area)
b88da45
@j-manu

How did you actually cancel the event? I tried capturing the event and calling preventDefault, by adding a listener to "body" but the browser (FF) opens the image if it is dropped outside the drop zone. The event on body does not seem to fire.
Since the user can drop the file anywhere, body seemed the only logical place to trap all drops but it is not working out :(

@gonchuki
if (document.body.addEventListener) {
  document.body.addEventListener('dragover', function (e) { if (e.dataTransfer && (Array.prototype.indexOf.call(e.dataTransfer.types, 'Files') !== -1)) e.dataTransfer.dropEffect = 'none'; e.preventDefault(); }, false);
  document.body.addEventListener('drop', function (e) { e.preventDefault(); }, false);
}

short explanation:

  • you need to prevent both drop and dragover for this to work
  • you only want to prevent users from dropping files, dragging and dropping text into forms should still be accepted, thus that's why I check on e.dataTransfer
  • the drop effect thing changes the cursor to the "forbidden" one.
@NeoXidizer

gonchuki, thank you very much for this fix!
P.S. this code also breaks the latest safari on Windows

$('#dropZone').bind('dragover', function(e){
    $(this).addClass('hover');return 0;
});
@jayarjo jayarjo referenced this pull request from a commit
@gonchuki gonchuki Fix Safari drag&drop functionality when cancelling the event in docum…
…ent.body (or any parent element of the droppable area). Close #458.
e2a82b6
@jayarjo
Owner

In Plupload 2 we've now removed the whole fakeSafariDragDrop thing.

@jayarjo jayarjo closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Jan 11, 2012
  1. @gonchuki

    fix Safari drag&drop functionality when cancelling the event in docum…

    gonchuki authored
    …ent.body (or any parent element of the droppable area)
This page is out of date. Refresh to see the latest.
Showing with 5 additions and 0 deletions.
  1. +5 −0 src/javascript/plupload.html5.js
View
5 src/javascript/plupload.html5.js
@@ -395,6 +395,11 @@
dropInputElm.parentNode.removeChild(dropInputElm);
}, uploader.id);
+ // avoid event propagation as Safari cancels the whole capability of dropping files if you are doing a preventDefault of this event on the document body
+ plupload.addEvent(dropInputElm, 'dragover', function(e) {
+ e.stopPropagation();
+ }, uploader.id);
+
dropElm.appendChild(dropInputElm);
}
Something went wrong with that request. Please try again.