桌面拖入图片到html元素、页面内图片拖动

最新推荐文章于 2024-08-29 23:28:51 发布

luck_lin

最新推荐文章于 2024-08-29 23:28:51 发布

阅读量2.3k

点赞数

分类专栏： Web technology 文章标签： ondrop

本文链接：https://blog.csdn.net/qwe502763576/article/details/80112155

版权

Web technology 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box{
			width: 400px;
			height:400px;
			border: 2px solid red;
		}
		img{
			width: 100px;
			height: 100px;
		}
		.target{
			width: 400px;
			height:400px;
			border: 2px solid red;
		}
	</style>
</head>
<body>
	<div class="box">
		<img id="lantian" src="C:\Users\qianfeng\Desktop\lantian.jpg">
		<img id="long" src="C:\Users\qianfeng\Desktop\long.jpg">
	</div>
	<div class="target"></div>
	<script type="text/javascript">
		// 浏览器文件拖入事件
		ondragover = function(e){
			e.preventDefault();
		}
		ondrop = function(e){
			e.preventDefault();
			let file = e.dataTransfer.files[0];
			let fr = new FileReader();
			fr.readAsDataURL(file);
			fr.onload = function(e){
				let img = new Image();
				img.src = this.result;
				document.body.appendChild(img)//将图片拖到body内
			}
		}

		// 页面内拖动文件
		let target = document.getElementsByClassName("target")[0];
		let box = document.getElementsByClassName("box")[0];
		box.ondragstart = (e)=>{
			let imgId = e.target.id;
			e.dataTransfer.setData("id", imgId);
			console.log(imgId)
		}
		target.ondragover = (e)=>{
			e.preventDefault();
		}
		target.ondrop = (e)=>{
			e.preventDefault();
			let imgId = e.dataTransfer.getData("id");
			let clone = document.getElementById(imgId).cloneNode(true);
			target.appendChild(clone);
		}
	</script>
</body>
</html>