HTML5拖拽

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box
			{
				padding: 0px;
				margin: 0px;
				width: 300px;
				height: 100px;
				border: 1px solid black;
			}
		</style>
		
		<script>
			function drag(ev)//开始拖拽的时候调用该函数，用户设置被拖数据的数据类型和值 该例子中数据类型是Text 值为被拖动元素的ID
			{
				ev.dataTransfer.setData("Text",ev.target.id);//ev.target是获取所操作的元素
			}
			function allowDrop(ev)
			{
				ev.preventDefault();//默认的无法将数据放入其他数据中，因此在这里要阻止默认，调用ondragover事件的event.preventDefault()
			}
			function drop(ev)
			{
				ev.preventDefault();
				var data=ev.dataTransfer.getData("Text");
				ev.target.appendChild(document.getElementById(data));
			}
		</script>
		
	</head>
	<body>
		<div id="box" ondragover="allowDrop(event)" ondrop="drop(event)"></div><!--当放置被拖拽元素时会触发ondrop事件  ondragover事件规定在何处放被拖动元素-->
		<img id="drag1" src="../img/a1.jpg" draggable="true" ondragstart="drag(event)"  width="336px" height="69px"/> <!--要设置draggable的值为true，只有这样该元素才可被拖动 -->
	</body>
</html>
<!--
	1、将被拖拽元素的draggable属性设置成true，因为每个元素默认是不可拖拽的
	2、声明drag(event)函数，并在被拖拽元素中添加 ondragstart事件，只要一拖拽就会触发该事件,
	设置被拖拽元素的类型和值，值为被拖拽元素的id
	3、声明allowDrop(event)函数，并在目标元素中添加ondragover事件， 是在拖拽过程中触发该事件并调用allowDrop(event)
	函数，因为目标地址默认是不允许将数据放入的，因此这里要阻止默认
	4、声明drop(event)函数，并在目标元素中添加drop(event)事件，在放入被拖拽元素的事件触发
-->
猜你喜欢
