h5-17-元素拖放 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#div1 {
				width: 400px;
				height: 200px;
				border: 1px solid red;
				margin-bottom: 20px;
			}
			
			#div2 {
				width: 400px;
				height: 200px;
				border: 1px solid blue;	
				margin-bottom: 20px;			
			}
		</style>
	</head>
	<body>
		<div id="div1" ondragover="dragover(event);" ondrop="drop(event);"></div>
		<div id="div2" ondragover="dragover(event);" ondrop="drop(event);"></div>
		
		<img id="img1" src="img/user7.jpg" draggable="true" ondragstart="dragstart(event)"/>
		<img id="img2" src="img/user10.jpg" draggable="true" ondragstart="dragstart(event)"/>
		
		<script>			
			/*当开始拖动元素*/
			function dragstart(e) {
				console.log(e.target.id + '拖动开始');
				//在事件对象中存储被拖动元素的id
				e.dataTransfer.setData('objId',e.target.id);
			}
			
			/*当元素被拖动到当前元素中*/
			function dragover(e) {
				console.log(e.target.id + '：dragover');
				//阻止默认行为（，默认行为就是不让鼠标释放元素到这里）
				e.preventDefault();
			}
			
			/*当元素被释放到当前元素中事件*/
			function drop(e) {
				console.log(e.target.id + '：drop');
				//阻止默认行为
				e.preventDefault();
				//获得当前被拖动元素的id
				var id = e.dataTransfer.getData('objId');
				//获得被拖动元素的对象
				var obj = document.getElementById(id);
				//在当前元素中插入被拖动元素
				if (e.target.nodeName == 'DIV')
					e.target.appendChild(obj);				
			}			
		</script>
	</body>
</html>

　　

posted @ 2017-08-04 11:09  奋斗的少年WH  阅读(176)  评论(0)    收藏  举报