HTML5拖动元素放到指定位置

最新推荐文章于 2023-03-14 12:30:01 发布

Agwenbi

最新推荐文章于 2023-03-14 12:30:01 发布

阅读量8.5k

点赞数 3

分类专栏： JavaScript 文章标签： html5

本文链接：https://blog.csdn.net/Ag_wenbi/article/details/70677307

版权

JavaScript 专栏收录该内容

47 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		#box {width: 300px;height: 200px;border: 1px solid #000;}
		#img {width: 150px;height: 100px;}
	</style>
	<script type="text/javascript">
		window.onload = function () {
			function start(ev) {
				ev.dataTransfer.setData("Text", ev.target.id); //设置数据类型为（“Text”）和ID 
			}
			function stop(ev) {
				ev.preventDefault(); //阻止元素发生默认行为 
				var id = ev.dataTransfer.getData("Text"); //获取数据类型对应的ID         
				ev.target.appendChild(document.getElementById(id));
			}
			function over(ev) {
				ev.preventDefault();
			}
			var oBox = document.getElementById('box');
			var oImg = document.getElementById('img');
			oImg.ondragstart = function (ev) { //要拖动的元素触发本函数 
				start(ev); 
			}; 
			oBox.ondragover=function(ev){//拖动过程中触发本函数 
				over(ev); 
			}; 
			oBox.ondrop=function(ev){//拖动结束时触发本函数 
				stop(ev); 
			}; 
		};
	</script>
</head>
<body>
	<div id="box"></div>
	<img src="../img/zly6.jpg" draggable="true" id="img" /> </body>
</html>