javascript - Is html5 drag and drop broken on safari browser for windows? - Stack Overflow

admin管理员组

文章数量:1242789

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

• javascript
• windows
• html
• safari
• draggable

Share Improve this question Follow asked Mar 12, 2012 at 17:37 ivymikeivymike 1,59122 gold badges2222 silver badges2727 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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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.

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/

本文标签： javascriptIs html5 drag and drop broken on safari browser for windowsStack Overflow