当前位置：网站首页>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