<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> #div1 {width: 198px; height: 120px;padding:10px;border:1px solid #aaaaaa;} </style> </head> <body> <script> 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)); } function allowDrop(ev){ ev.preventDefault(); } </script> <p>请将图片拖入矩形框中</p> <!-- draggable="true"允许元素可拖动 ondragstart拖动何？ondragover拖到哪里？ondrop放置 --> <div id='div1' ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br /> <img id="drag1" src="1.jpg" draggable="true" ondragstart="drag(event)" width="106" height="100"> </body> </html>