<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>拖放</title> <style> #ibox{ width: 400px; height: 400px; float: left; background-color: darkgray; } #ibox2{ width: 400px; height: 400px; float: left; background-color: aqua; } </style> <script type="text/javascript"> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("img", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("img"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <div id="ibox" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <div id="ibox2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <img id="iimg" src="raw/5.png" width="150px" height="150px" draggable="true" ondragstart="drag(event)"> </body> </html>
拖放：
http://blogs.sitepointstatic.com/examples/tech/filedrag/2/index.html
http://www.sitepoint.com/html5-ajax-file-upload/
原文：http://www.cnblogs.com/iMirror/p/4290405.html