拖放主要是两个部分组成，drag：拖动，drop：放置！既抓取元素后拖到另一个位置！
要实现拖放首先要把被拖动元素设置为可拖动，既：
draggbile="true"
然后要拖动什么：ondragstart()和setData(),要放到何处：ovdragover(),然后代码将获取的元素进行放置：ondrop();
下面是一个拖动实例，(来回拖放)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>html5 拖动</title> </head> <style type="text/css"> .top{width: 700px;height: 160px;border: solid #ccc 1px;margin: 20px 0 0 20px;} .img1{margin: 20px 0 0 20px;} </style> <script type="text/javascript"> /* *被拖动数据是被拖动元素的ID; *ondrop():当元素进行放置时发生 *ondragstart()：当元素被拖动时发生 *ondragover():规定在何处放置被拖动元素时发生 */ function allowDrop(ev){ //设置拖动到何处触发的事件“ondragover”,避免浏览器对元素的默认处理，（浏览器对元素的默认处理是以链接的方式打开） ev.preventDefault(); } function drag(ev){ //设置被拖动元素触发事件"ondragstart"和"setData" ev.dataTransfer.setData("Text",ev.target.id);//通过setData来设置被拖动数据的数据类型和值;"Text":数据类型，值是被拖动元素的id } function drop(ev){ //设置元素被放置时发生的事件 ev.preventDefault();//避免浏览器对元素的默认处理 var data=ev.dataTransfer.getData("Text");//通过dataTransfer.getData()来获取被拖动元素的数据，该方法返回在dataTransfer.setData()中设置为相同类型的数据 ev.target.appendChild(document.getElementById(data));//把被拖动元素追加到目标元素中 } </script> <body> <div class="top" id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="images/img.png" id="drag1" ondragstart="drag(event)" class="img1" draggable="true"> </div> <div class="top" id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> </body> </html>