h5拖放1

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>


阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zoekitty/article/details/52382111
文章标签: h5拖放
个人分类: javascript
上一篇运动框架
下一篇h5拖放2
想对作者说点什么? 我来说一句

免费的vpn小白兔软件

2011年06月08日 978KB 下载

没有更多推荐了,返回首页

关闭
关闭