HTML5——3 HTML5拖放

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>拖放</title>
 6     <style>
 7         #div1{
 8             width: 300px;
 9             height: 300px;
10             border: 1px solid #aaabbb;
11         }
12     </style>
13     <script>
14         function allowDrop(ev){
15             ev.preventDefault();
16         }
17         function drag(ev){
18             ev.dataTransfer.setData("Text",ev.target.id);
19         }
20         function drop(ev){
21             ev.preventDefault();
22             var data=ev.dataTransfer.getData("Text");
23             ev.target.appendChild(document.getElementById(data));
24         }
25     </script>
26 </head>
27 <body>
28     <p>请拖动图片</p>
29     <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
30         
31     </div>
32     <img id="drag1" src="images/1.png" draggable="true" ondragstart="drag(event)">
33 </body>
34 </html>