I am having trouble with my gwt application on Chrome (mac os + windows) when I drag and drop.
I don't know when it started, which chrome update.
When I drag and drop an html item it hides most of the screen except the html item I use.
Here is the video : https://drive.google.com/file/d/14d13CrzKPRwB1nAgAcIMQI_4PBHBaXo8/view?usp=sharing
To reproduce this, I remove all the html from my application except a small part (what you can see on the video)
I keep all js + css, I put break points on all html elements, to see if something is changing on drop event.
There is something with gwt because If I remove the iframe with my application name as id I don't have the problem anymore.
No problem on firefox or safari, no html or css is modified when I drop the html element so I thought the problem was chrome but when I remove the iframe with my application name as id it works (but my application doesn't work anymore).
I don't know why when I resize the window the screen is refreshed and everything is ok too.
Edit it works with the chrome bêta https://www.google.com/intl/fr/chrome/beta/ so chrome problem
Ok with v105
Not Ok with v106
Ok with bêta v107
So i developed a web app and i used onauxclick on a functionality. When i went to test it on firefox browser it all went perfectly. I tested it with google chrome browser and the onauxclick event handler wasn't working when pressing down the mouse wheel. After few more testing i was able to make it work by selecting the text and pressing the right mouse button (without leaving the selected text). So i was wondering, how does it work differently on google chrome browser and windows 10?
While the different browser vendors try to stay as close as possible to the W3C standards when implement HTML and JavaScript features, they do tend to sometimes introduce minor differences between implementations or even not implement some stuff at all.
The feature you are trying to use is at the moment experimental and not supported on Safari and Safari iOS. Expect it to change a bit until it is finalised and released.
More details here:
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onauxclick
I have been working on this bug for a while now , for some reason the drag and drop uploading I implemented on my site has not been working in chrome. No error messages or anything. Just when you try to drag a file over the designated area you get the mouse icon of the circle with the line through it. So after testing and testing and testing I came to realize that even if I go to the html5 Official demo page for the drag and drop it does not work there either in Google Chrome.
Has anyone ran into this? is there some type of security setting that got triggered in my Chrome browser that is preventing the drag-n-drop ?? I am concerned now that there may be other user that may run into this. Currently I check if the user's browser if HTML5 compatable and then only offer the drag-n-drop option, if not I fall back to the choose a file button. But now I'm learning that there may be a third case - which is mine now . I have the newest version of Chrome , but it just for some reason started blocking drag-n-drop a few days ago. It used to work just fine.
EDIT
the HTML5 drag-n-drop demo site
and I'm using Chrome Version 39.0.2171.65 m
I found strangely enough (on version 57.0.2987.110) that closing all instances of chrome, opening task manager and making sure it is fully closed, then restarting it seemed to get the dropping working again.
I'm not sure of a fix when this is occurring but I did see a bug report about this at https://productforums.google.com/forum/#!topic/gmail/RgPdExhVPMs but it looks to me like a browser update (as this was originally posted in 2015 and likely isn't a problem anymore) would fix it right up.
I have a problem with my drag and drop javascript code.
With chrome it works but when I use firefox or internet explorer there are some problems.
For instance, with IE div data set to NULL and with firefox, my webpage is redirecting.
Thanks for all.
http://jsfiddle.net/Fr4NgUs/h399T/
this.innerHTML = event.dataTransfer.getData('text/html');
Last night, I thought I'd do a quick project to demonstrate HTML5 capabilities and to try some things out. However, I can't seem to figure out how to get drag and drop to work in Safari, while it works perfectly in Chrome and Firefox. More precisely, it seems that drop event does not fire in Safari, when you try to drag an image inside the website into the drop area. At the same time it does fire when you drag and drop a file from desktop.
I'm not really sure, but I'm pretty certain that when I tried the same script at work (where I have Safari 5.0.2 etc), it fired the drop event (going to check it tomorrow to be sure) and gave me the FileReader-related errors that were expected. But when I just installed Safari 5.1 on my own PC, I only get dragover, enter and leave events (and drop too if the file was dragged into the browser).
I've been Googling for some time now and don't seem to find a single example of drag and drop that actually works in Safari 5.1. Even Safari's dev-centre's sample doesn't work, let alone html5demo.com 1 and html5demo.com 2. This leads me to think whether the Safari has a bug, or maybe they have implemented something mandatory that isn't reflected in the dev-centre (last updated in 2009).
The script I'm trying to fix is at my site (sorry guys, no problem specific code to post, as it seems to be broken elsewhere too).
PS! I might have introduced some bugs into my own site while desperately trying to fix the drag and drop in Safari, but I'm too tired to fix them right now.
UPDATE: Just confirmed at work that the drop event does fire in Safari 5.0.2 on Mac OS X.
UPDATE 2: Also confirmed that everything works perfectly fine with Safari 5.0.6 on Win 7, the same computer that fails with 5.1
Testing with Safari 5.1.7 Mac:
To see the drop event fire, you have to handle the dragover event and call event.preventDefault().
Here's the (quite entertaining) discussion where I found the answer:
http://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html
I don't know if this really solves the question because the asker's site (at least as of today) does this. It works fine on my machine (as do the HTML5 demo pages). But this may help someone coming to this thread with this problem who doesn't know about this rather unintuitive implementation detail.
I am using Safari 5.1.5 (7534.55.3) on a Windows 7 PC which I just installed the other day, no previous installs of Safari and I cannot get any of the online HTML5 drag-n-drop demos to work.
I am working on a project with drag-n-drop and Modernizr tells me that I'm good to go with Safari (Modernizr.draganddrop == true), but when I actually drop the item the drop event does not fire.
I've added alert debugging and nothing.
My testing shows that Safari 5.1.5 (7534.55.3) on a Windows 7 PC drop event is broken. All other drag events seem to work: dragstart, dragend, dragenter, dragleave, dragover.
Just to clarify: Visited your site and found no errors. Opened the console, no error, and everything appeared to function as designed. Tried all provided examples with no error.
All examples work fine Safari Version 5.1 (7534.48.3). Sorry, mate – Maybe it's a setting you've changed?
Allow me to suggest a possibility:
Go to Safari->Empty Cache... Then Safari->Reset Safari... Try reloading the page.
Likely, there's something cached that's creating a conflict. There seems to be nothing wrong with your script in the slightest.
Edit
Some things to check...
Are any of your function names containing reserved words? I've done this, had it not throw any errors, but it simply wouldn't work.
I've had some weird issues with Safari not running methods written as funcName = function(){}. If you can pin down the method that isn't firing (I add a little function when I'm developing called DBG which I'll add below – basically, if a debug flag is set, you log to the console), you can try rewriting the function.
// Some sort of boolean flag.
var debug = true;
// This is kind of an obvious function, but can be expanded as you like.
// Little tricks to make life easier.
function DBG(str) {
debug ? console.log(str) : return;
}
I still think ultimately this boils down to something caching wrong, but it's worth a try.
I encountered similar issues, the drop event appeared to not be firing. Safari apparently expects the "dragover" event to also be bound. As soon as I also added that, it worked. So ... I'm sharing in case it's relevant.
My first attempt:
$(document).bind
drop: (e) ->
// This never gets fired in safari (does work in chrome)
console.log e.originalEvent.dataTransfer.files
false
My "fix":
$(document).bind
dragover: (e) ->
console.log e
false
drop: (e) ->
// This does get fired (in chrome and safari)
console.log e.originalEvent.dataTransfer.files
false