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 puters with clean install and latest setup.
Tried with both this demo and my own code which works on every other latest browser.
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 puters with clean install and latest setup.
Tried with both this demo and my own code which works on every other latest browser.
http://html5demos./drag
Share Improve this question asked Mar 12, 2012 at 17:37 ivymikeivymike 1,5912 gold badges22 silver badges27 bronze badges 2- If it works for Gmail it should work for you. – Diodeus - James MacFarlane Commented Mar 12, 2012 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 Commented Mar 12, 2012 at 18:32
3 Answers
Reset to default 9Indeed 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.
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 es to the party soon.
From http://html5doctor./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./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./en/tutorials/dnd/basics/