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>