H5在网页中拖放图片

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>

H5在网页中拖放图片

猜你喜欢