H5中实现拖放效果，常用的实现方法是利用事件drag和drop;
1.设置元素为可拖放。
<img draggable="true"/>
2.第二步：拖动什么
实现拖放的第二步就是设置拖动的元素，常见的元素有图片，文字，动画，实现拖放功能的是 ondragstart和setData()，即规定当元素被拖动时，会发生什么。
dataTransfer.setData()方法设置被拖放数据的类型和值。
function drag(ev){ ev.dataTransfer.setData("Text",ev.target.id); }
上这这个例子中，数据类型是"Text" 值是可拖动的元素id("drag1");
3.第三步：放到何处
实现拖放功能的第三步就是讲可拖放元素放到何处，实现该功能的事件是ondragover，在默认情况下，无法将数据/元素放置到其他元素中，如果需要设置允许放置，用户必须阻止对元素的默认处理方式。
这就需要通过调用ondragover事件的event.preventDefault()方法。
event.prenventDefault()
第4步：进行放置
当放置被拖放数据时，就会发生drop事件，在上面的例子中，ondrop属性调用了一个函数，drop(event)，具体代码如下。
function drop(ev){ ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); }
具体实现代码如下
<!doctype html> <html> <head> <meta charset="utf-8"> <title>在网页中拖放图片</title> <style type="text/css"> #div1 {width: 150px;height: 150px;padding: 10px;border: 1px solid red;} </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="../搞笑图片/11.jpg" width="100" height="100" draggable="true" ondragstart="drag(event)"/> </body> </html>
