html5实现目标拖放

html5实现目标拖放_第1张图片

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		</style>
		<script>
		     function drag1(ev){
		     	//dataTransfer.setData() 方法设置被拖数据的数据类型和值,也就是设置对象ev的id为Text类型并等待getData()方法的调用
		     	ev.dataTransfer.setData("Text",ev.target.id);
		     }
		     function allowDrop(ev){
		     	//调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)
		     	ev.preventDefault();
		     }
		     function drop(ev){
		        ev.preventDefault();
		        //通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
		     	var data=ev.dataTransfer.getData("Text");
		     	//通过img元素的id--data来获得img元素并放置于div元素中
		     	ev.target.appendChild(document.getElementById(data));
		     
		     }
		</script>
	</head>
	<body>
		<div id="div1" style="border: 1px red solid;width: 300px;height: 300px;"ondragover="allowDrop(event)" ondrop="drop(event)"></div>
	    <img id="img1" src="img/3.gif" style="width: auto; height: 100px;" draggable="true"
	    	ondragstart="drag1(event)"/>
	    	
	</body>
</html>
以上是w3c文档中所推荐的方法,其中有对dataTransfer.setData()和dataTransfer.getData()的使用,其具体解释我已在程序中标明,下面,我将在不使用 dataTransfer.setData()和dataTransfer.getData()的情况下同样实现目标的拖放功能。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		</style>
		<script>
                   function allowDrop(ev){
		       //调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)
		     	ev.preventDefault();
		     }
		     function drop(ev){
		        ev.preventDefault();
                       //通过img元素的id--img1来获得img元素并放置于div元素中
		     	ev.target.appendChild(document.getElementById('img1'));
		     
		     }
		</script>
	</head>
	<body>
		<div id="div1" style="border: 1px red solid;width: 300px;height: 300px;"ondragover="allowDrop(event)" ondrop="drop(event)"></div>
	    <img id="img1" src="img/3.gif" style="width: auto; height: 100px;" draggable="true"
	    	/>
	    	
	</body>
</html>

html5实现目标拖放_第2张图片

html5实现目标拖放_第3张图片

以上两种方法均可以实现拖放,但是前者的拖放有数据交互,可以使拖放更有意义和价值。





你可能感兴趣的:(H5,drop,drag,dataTransfer,html5拖放)