<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>图片拖放</title> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <style type="text/css"> #div1 {width:500px;height:800px;border:1px solid #aaaaaa;} #div2 {width:500px;height:800px;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> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br> <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"> <img id="drag1" src="./images/download.jpg" draggable="true" ondragstart="drag(event)" width="500" height="500"> </div> </body> </html>