drag、drop事件，拖拽图片到div里

最新推荐文章于 2024-05-11 10:05:08 发布

qq_24618061

最新推荐文章于 2024-05-11 10:05:08 发布

阅读量656

点赞数

分类专栏： web前端文章标签： javascript web html5

本文链接：https://blog.csdn.net/qq_24618061/article/details/121574068

版权

web前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

完整代码如下：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
		div{
			width:500px;
			height:300px;
			border:5px solid #ddd;
		}
	</style>
  <script></script>
 </head>
 <body>
  <div></div>
	<br><br><br>
	<img src="img/1.jpg" alt="">
	<img src="img/2.jpg" alt="">
	<img src="img/3.jpg" alt="">
	<img src="img/4.jpg" alt="">

	<script>	
		var imgs=document.getElementsByTagName('img');
		var target=document.getElementsByTagName('div')[0];
		console.log(imgs,target);
		
		for(var i=0;i<imgs.length;i++){
			imgs[i].ondragstart=function(event){  //给ondragend绑定事件会出错，因为取到的不是传过去的值，是自带的值
				event.dataTransfer.setData('text/html',this.getAttribute('src'));
				//console.log(this.src);
			}

		}
		target.ondragover=function(event){
			event.preventDefault();
		}
		target.ondrop=function(event){
			var data=event.dataTransfer.getData('text/html');
			var img=document.querySelector('[src="'+data+'"]');
			this.appendChild(img);
			console.log(data);
		}
	</script>
 </body>
</html>

qq_24618061

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
drag、drop事件，拖拽图片到div里

完整代码如下：<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{ width:500px; height:300px; border:5px solid #ddd; } </style> <scr...
复制链接

扫一扫