HTMLt简单拖放

HTML5新增了拖放的API，通过拖放API可以让HTML页面的任意元素都变成可拖放的，有两个动作，拖和放，直接上Demo代码。

1.页面内简单的拖放

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>可拖动的元素</title>
		<link rel="stylesheet" type="text/css" href="test.css" />
	</head>
	<body>
		<div id="dragDiv" class="dragDiv" draggable="true">
			<a href="http://www.baidu.com">疯狂软件教育</a>
			<img src="img/HBuilder.png" id="dragImg" />
		</div>
		<script type="text/javascript">
			var source = document.getElementById("dragDiv");
			// 开始拖动
			source.ondragstart = function(evt) {
				evt.dataTransfer.setData("text/plain", "www.baidu.com")
			}
			//取消拖动事件默认行为
			document.ondragover = function(evt) {
				return false;
			}
			//放事件
			document.ondrop = function(evt) {
				source.style.position="absolute";
				source.style.left=evt.pageX+"px";
				source.style.top=evt.pageY+"px";
				//取消放 事件的默认行为
				return false;
			}
			
		</script>
	</body>
</html>

 

posted @ 2016-04-13 00:09  ToBeStrong  阅读(190)  评论(0)    收藏  举报