元素拖拽

原创于 2017-10-11 15:31:02 发布 · 206 阅读

本内容遵循CC 4.0 BY-SA版权协议

收录于

当前文章被收录于：

7 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
	*{
	margin: 0;
	padding: 0;
	}
	div{
	width: 400px;
	height: 500px;
	margin: 100px;
	float: left;
	border: 1px solid lightskyblue;
	text-align:center;

	}
	img{
	height:400px;
	margin-top: 50px;
	}
	</style>
	</head>
	<body>
	<div class="box">
	<img src="img/2 (94).jpg"draggable="true" />//被拖拽的元素中必须添加——draggable="true"
	</div>
	<div class="target"></div>
	<script>
	var img=document.querySelector("img");//被的拖拽元素
	var target=document.querySelector(".target");//拖拽到的位置
	target.ondragover=function(e){//当鼠标悬停在目标位置时，阻止默认事件
	e.preventDefault();//阻止默认事件
	}
	target.ondrop=function(e){//当鼠标松开时，将元素拖拽到目标位置
	this.appendChild(img);
	}
	</script>
	</body>
	</html>