h5拖放1

最新推荐文章于 2023-09-12 10:26:10 发布

zoekitty

最新推荐文章于 2023-09-12 10:26:10 发布

阅读量405

点赞数

分类专栏： javascript 文章标签： h5拖放

本文链接：https://blog.csdn.net/zoekitty/article/details/52382111

版权

javascript 专栏收录该内容

33 篇文章 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>

zoekitty

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
h5拖放1

02drag img.html #box{ width: 500px; height: 500px; margin: 20px auto; background: pink; } //1.获取元素 var img = document.getElementById('img');
复制链接

扫一扫

专栏目录