H5中实现拖放效果，常用的实现方法是利用事件drag和drop;
1.设置元素为可拖放。
<img draggable="true"/>
2.第二步：拖动什么
实现拖放的第二步就是设置拖动的元素，常见的元素有图片，文字，动画，实现拖放功能的是 ondragstart和setData()，即规定当元素被拖动时，会发生什么。
dataTransfer.setData()方法设置被拖放数据的类型和值。
代码语言：javascript复制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)，具体代码如下。
代码语言：javascript复制function drop(ev){
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}具体实现代码如下
代码语言：javascript复制<!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>
