Safari 5.1 broke HTML native drag and drop?

Question

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

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

Answer 2

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.

Answer 3

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.

Answer 4

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