当前位置：网站首页>Drag and drop

Drag and drop

2022-06-26 03:22:00 【Small vegetable bird yard live】 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#box{
				width: 300px;
				height: 300px;
				border: 3px solid red;
			}
		</style>
	</head>
	<body>
		<img id="img" src="img/musicBtn.png" alt=""/>
		<div id="box">
			
		</div>
		<script>
			var img = document.getElementById('img');
			var box = document.getElementById('box');
			img.ondragstart = function(e){
				console.log(1);
				e.dataTransfer.setData('text',this.id);
			}
			box.ondragover = function(e){
				e.preventDefault();// Cancel default event handling 
			}
			box.ondrop = function(e){
				var txt = e.dataTransfer.getData('text');
//				console.log(txt);
				box.appendChild(document.getElementById(txt));
//				img.parentNode.removeChild(img);
//				box.innerHTML += '<img src="'+txt+'">';
			}
		</script>
	</body>
</html>

Insert picture description here
Insert picture description here

原网站

版权声明
本文为[Small vegetable bird yard live]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/177/202206260249289036.html

边栏推荐

猜你喜欢

随机推荐