问题
Looking for some guidance, still a code learner and having a bit of a struggle using the HTML5 DnD/File Api... Played around with a few of the demos to try and understand how they work and I'm having a bit of an issue.
Most seem to use an inline css/js method I am trying to use them in separate files but can't seem to get it right.
Could someone do a very quick demo for me using an HTML canvas with a Drag in from the desktop, a simple canvas element with the drop in from desktop? Can't seem to get my head round it.
Using chrome so no need to worry about cross browser support.
Many thanks aldo.
回答1:
Try this -
http://www.w3schools.com/html/html5_draganddrop.asp
https://www.ibm.com/developerworks/mydeveloperworks/blogs/bobleah/entry/html5_an_example_of_drag_and_drop26?lang=en
http://blog.exadel.com/a-simple-html5-drag-and-drop-example/
Try googling it, there are lot of simple examples out there
回答2:
I always worry about people who say things like "Using chrome so no need to worry about cross browser support" - because that's kinda how things started with IE6, and look where that led us.
However, the good news is that the HTML5 File API is supported by most modern browsers, so we don't need to do anything browser specific.
The Mozilla site is a great reference, and they have an excellent tutorial on how to use the File API. Read it here: https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications
This tutorial covers a lot more ground than just drag and drop, and you'll need to work through a few more basic items first before you get to the drag+drop bit, but it's thorough and explains everything in good detail.
Hope that helps.
来源：https://stackoverflow.com/questions/13772583/drag-and-drop-desktop-to-browser-html5-javascript