javascript拖拽盒子移动的实现

最新推荐文章于 2023-10-17 19:40:46 发布

fisher-zh

最新推荐文章于 2023-10-17 19:40:46 发布

阅读量3.9k

点赞数 1

分类专栏： javascript 文章标签： JavaScript 拖拽事件

本文链接：https://blog.csdn.net/sir1241/article/details/52800054

版权

javascript 专栏收录该内容

34 篇文章 1 订阅

订阅专栏

原理比较简单，可以参照之前的文章javascript淘宝主图放大镜功能帮助理解。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#box{
				position: absolute;
				left: 50px;
				top: 50px;
				width: 200px;
				height: 200px;
				background: red;
			}
			#box2{
				position: relative;
				box-sizing: border-box;
				width: 800px;
				height: 400px;
				margin: 50px auto;
				border: 1px solid gray;
			}
			
		</style>
		<script type="text/javascript">
			window.onload = function (){
				var box = document.getElementById('box');
				var box2 = document.getElementById('box2');
				var boxX = 0;
				var boxY = 0;
				box.onmousedown = function (ev){
					var ev = ev||event;
					boxX = ev.clientX - box.offsetLeft;
					boxY = ev.clientY - box.offsetTop;
					
					var n = 10;//吸附参数
					
					if(box.setCapture){
						document.onmousemove = mousemove;
						document.onmouseup = mouseup;
						box.setCapture();//IE中将其他地方的事件集中到box
						
					}
					else{
						document.onmousemove = mousemove;
						document.onmouseup = mouseup;
					}
					
					
					function mousemove (ev){
						var ev = ev||event;
						var l = ev.clientX - boxX;
						var t = ev.clientY - boxY;
						//边缘吸附处理
						if(l<n){
							l = 0;
						}
						else if(l>box2.offsetWidth-box.offsetWidth-n){
							l = box2.offsetWidth-box.offsetWidth-2;
						}
						if(t<n){
							t = 0;
						}
						else if(t>box2.offsetHeight-box.offsetHeight-n){
							t = box2.offsetHeight-box.offsetHeight-2;
						}
						box.style.left = l+"px";
						box.style.top = t+"px";
						
						
					}
					function mouseup (){
						this.onmousemove = null;
						this.onmouseup = null;
						if(this.releaseCapture)
						{
							this.releaseCapture();
						}
					}
					return false;
				}
				
			}
		</script>
	</head>
	<body>
		<div id="box2">
			<div id="box"></div>
		</div>
	</body>
</html>

fisher-zh

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
javascript拖拽盒子移动的实现

原理比较简单，可以参照之前的文章javascript淘宝主图放大镜功能帮助理解。 *{ margin: 0; padding: 0; } #box{ position: absolute; left: 50px; top: 50px; width: 200px; height: 200px;
复制链接

扫一扫