jquery.event.drop-2.0 prevents native browser drag and drop

703 views
Skip to first unread message

Ian L.

unread,
Feb 18, 2011, 12:45:55 PM2/18/11
to threedubmedia
"Native" here refers to the ability to drop files from a file explorer
onto a browser window, ala http://html5demos.com/file-api

Open a browser that supports native drag and drop, like a recent
Chrome or Firefox. Open a page that has included jQuery, like
http://jquery.com/, and type the following statements using the Chrome
or FireBug console:

$(document).bind('dragover dragend', function(e) { return
false; });
$(document).bind('drop', function(e) { e.preventDefault();
console.log('dropped'); return false; })

Now drag a file onto the browser window and you'll see "dropped"
appear in the console. Hooray!

Unfortunately, once you include jquery.event.drop-2.0.js, dropping
files onto the browser window ceases to fire events. Go to a page that
includes both jQuery and jquery.event.drop-2.0.js, such as
http://threedubmedia.com/code/demo/blank/ , enter the same console
commands, and drag a file onto the browser. Nothing.

Note, however, that bare document event callbacks still work:

document.ondragover = document.ondragend = function(e) { return
false; };
document.ondrop = function(e) { e.preventDefault();
console.log('dropped'); return false; }

Any ideas? I'm going to look at this more closely in the meantime.

jhost...@gmail.com

unread,
Mar 8, 2012, 10:19:29 PM3/8/12
to threed...@googlegroups.com
I'm running into this same problem now, and can't figure out a good solution. I'm using SlickGrid for an app, which depends on these drag and drop plugins. Now I'm trying to work in native drag and drop file upload. All works fine as long as jquery.event.drop-2.0.js isn't included, and breaks as you describe when included.

Have you made any headway with this issue? I've noticed that it's only the drop event that doesn't fire. The dragover event is still captured as expected. If you found any workaround, I'd love to hear what your solution was.

Jason

tay...@gmail.com

unread,
Jan 6, 2014, 10:10:52 AM1/6/14
to threed...@googlegroups.com, brian...@gmail.com, germ...@gmail.com
Adding return false did work for me, thanks. Took me way to long to track down the error in this project!

On Friday, February 1, 2013 3:45:15 PM UTC-6, germ...@gmail.com wrote:
The real solution is to add a simple `return false;` to the `setup()` function in `$.event.special.drop` (~ jquery.event.drop.js:92), so that jQuery still also binds the event.

On Tuesday, July 17, 2012 8:08:17 AM UTC-5, brian...@gmail.com wrote:
My solution was to use the native method of adding event handlers; the jQuery method is convenient for abstracting inconsistencies with older browsers but because the FileReader & drag & drop file handling APIs are contemporary standards it's a safe assumption that the w3 dom events method will work for browsers that support this.

Serge Balykov

unread,
Mar 20, 2014, 8:09:12 AM3/20/14
to threed...@googlegroups.com, ian.la...@gmail.com
Does anybody find a solution? 

brani...@gmail.com

unread,
Jul 31, 2014, 11:48:13 AM7/31/14
to threed...@googlegroups.com, ian.la...@gmail.com
I have the same problem, anybody can help?
Reply all
Reply to author
Forward
0 new messages