源代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>编程字典</title> <style> #div1 { width: 250px; height: 112px; padding: 10px; border: 1px solid #aaaaaa; } </style> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <p>拖动图片到矩形框:</p> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br> <img id="drag1" src="../img/new_logo.png" draggable="true" ondragstart="drag(event)" width="250" height="112"> </body> </html>
运行结果