关闭

h5拖放1

标签: h5拖放
167人阅读 评论(0) 收藏 举报
分类:

02drag img.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		#box{
			width: 500px;
			height: 500px;
			margin: 20px auto;
			background: pink;
		}
	</style>
	<body>
		<div id="box">
			
		</div>
		<img src="images/1.jpg" id="img"  />
	</body>
	<script type="text/javascript">
		//1.获取元素
		
		var img = document.getElementById('img');
		
		var box = document.getElementById('box');
		
		//一共是三个事件  ondragstart 开始拖放 给被拖放的元素  ondragover拖放悬停在某个元素身上  给大盒子
		// ondrop 放置(松开鼠标)  给目标盒子
		
		//2.添加拖放开始事件
		
		img.ondragstart = function(e){
			
			//3.通过event对象保存被拖放元素的数据  ,保存被拖放元素的ID
			
			e.dataTransfer.setData('id',this.id);
			
			
			
		}
		
		//4.给目标盒子添加拖放悬停事件    
		
		box.ondragover = function(e){
			
			//5.通过event对象要阻止浏览器默认行为
			
			e.preventDefault();
			
			
		}
		
		//6.添加投放事件(鼠标松开)
		
		box.ondrop = function(e){
			
			//7.通过event对象获取之前保存的ID数据
			
			var id = e.dataTransfer.getData('id');
			
			//8.通过这个ID找到对应的元素
			
			var elem = document.getElementById(id);
			
			console.log(elem);
			
			//9.把这个被拖放的元素 插入到当前这个盒子里面
			
			this.appendChild(elem);
			
			
			
		}
		
	</script>
</html>


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:5839次
    • 积分:484
    • 等级:
    • 排名:千里之外
    • 原创:44篇
    • 转载:5篇
    • 译文:0篇
    • 评论:3条
    文章分类
    文章存档