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

Closed
wants to merge 1 commit into
from

Conversation

Projects
None yet
4 participants
@gonchuki
Contributor

gonchuki commented Jan 11, 2012

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.

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

This comment has been minimized.

Show comment Hide comment
@j-manu

j-manu Mar 30, 2012

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 :(

j-manu commented Mar 30, 2012

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

This comment has been minimized.

Show comment Hide comment
@gonchuki

gonchuki Mar 30, 2012

Contributor
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.
Contributor

gonchuki commented Mar 30, 2012

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

This comment has been minimized.

Show comment Hide comment
@NeoXidizer

NeoXidizer Jun 17, 2012

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;
});

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 added a commit that referenced this pull request Feb 24, 2013

Fix Safari drag&drop functionality when cancelling the event in docum…
…ent.body (or any parent element of the droppable area). Close #458.
@jayarjo

This comment has been minimized.

Show comment Hide comment
@jayarjo

jayarjo Feb 24, 2013

Contributor

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

Contributor

jayarjo commented Feb 24, 2013

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

@jayarjo jayarjo closed this Feb 24, 2013

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment