6

Is html5 drag and drop broken on safari browser for windows ? If so, are there any work arounds ?

I'm using Safari 5.1.2 on Windows 7 and the drop targets always show up as non droppable. Tried this on 2 different windows 7 computers with clean install and latest setup.

Tried with both this demo and my own code which works on every other latest browser.

http://html5demos.com/drag

ivymike
  • 1,511
  • 2
  • 20
  • 27
  • If it works for Gmail it should work for you. – Diodeus - James MacFarlane Mar 12 '12 at 17:42
  • @Diodeus: checked with Gmail. It doesn't display the drop zone at all. Instead shows the dialog asking whether I want to navigate away from the page. If I say leave page, It simply opens the dragged file. Of course my question was about in browser drag and drop between two elements but I can now confirm that even drag drop of files doesn't work anymore. – ivymike Mar 12 '12 at 18:32

3 Answers3

9

Indeed D&D for Safari doesn't work.

Kind of work around for Safari:

Put the logic in the 'dragend' event of the draggable object
Instead in the 'drop' event of the dropping on object.

Artemix
  • 2,113
  • 2
  • 23
  • 34
MosheZ
  • 91
  • 1
  • 2
3

Yes. After a lot of self-doubt, experimentation, and research, I can say that it is definitely broken for me too (Safari 5.1.7 on Windows) as at today: 15 Nov 2012. This has been quite confusing and distressing!

Hope Apple comes to the party soon.

aaaidan
  • 7,093
  • 8
  • 66
  • 102
  • 3
    Moreover, I found a pretty nasty bug in Win Safari 5.1.7 (browser crashes) when you attempt to call `setDragImage` on the `dataTransfer` object with an empty `
    `. Not impressed.
     – aaaidan Nov 14 '12 at 21:54
0

From http://html5doctor.com/native-drag-and-drop/#dragging_anything
add this:

[draggable=true] {
  -khtml-user-drag: element;
}

Non-HTML5 drag and drop is available via jQuery UI: http://jqueryui.com/demos/draggable/

You can build a download with only that specific function if you want it to be lightweight.

You can use Modernizr to detect whether it's supported and fall back on jQuery if needbe:

if (Modernizr.draganddrop) {
  // Browser supports HTML5 DnD.
} else {
  // Fallback to a library solution.
}

From http://www.html5rocks.com/en/tutorials/dnd/basics/

ramblinjan
  • 6,578
  • 3
  • 30
  • 38
  • 1
    Just checked the source of http://html5demos.com/drag it already has this style rule. So unfortunately it doesn't seem effective. I'm guessing its browser bug because it used to work in 5.0.* versions. – ivymike Mar 12 '12 at 18:34
  • 1
    Good to know--if all else fails jQuery UI will do the job. – ramblinjan Mar 12 '12 at 18:35
  • 1
    The -khtml-user-drag hack doesn't work for me on Windows Safari 5.1.7. – aaaidan Nov 14 '12 at 23:04