鼠标拖动div标签，动态改变位置

最新推荐文章于 2024-07-17 18:42:40 发布

ikeepers

最新推荐文章于 2024-07-17 18:42:40 发布

阅读量3k

点赞数 2

分类专栏： JS 文章标签： html DOM

本文链接：https://blog.csdn.net/qq_19599645/article/details/89762420

版权

JS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

简单来说就是鼠标拖着div在屏幕上走，当然也适用于其他的标签。没什么可说的，比较简单，直接上代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>div_mousemove</title>
</head>
<style type="text/css">
	#map{
		width: 200px;
		height: 200px;
		position: absolute;
		border:solid;
	}
</style>
<body>
<div id="map">active Div</div>
<script type="text/javascript">
	var map=document.getElementById('map');
	var isDrop=false
	var disx,disy
	map.onmousedown=function(event){
		disx=event.pageX-map.offsetLeft
		disy=event.pageY-map.offsetTop
		isDrop=true
	}
	window.onmouseup=function(){
		isDrop=false
	}
	window.onmousemove=function(event){
		if(isDrop){
			map.style.left=(event.pageX-disx)+'px'
			map.style.top=(event.pageY-disy)+'px'
		}
	}

</script>
</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

ikeepers

关注关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
鼠标拖动div标签，动态改变位置

简单来说就是鼠标拖着div在屏幕上走，当然也适用于其他的标签。没什么可说的，比较简单，直接上代码：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>div_mousemove</title></head><style type...
复制链接

扫一扫