限制范围的拖拽

最新推荐文章于 2023-06-13 11:58:51 发布

原创最新推荐文章于 2023-06-13 11:58:51 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#拖拽 #限制范围 #事件

事件对象专栏收录该内容

10 篇文章

订阅专栏

这篇博客通过一个简单的HTML和JavaScript示例展示了如何创建一个限制在指定范围内的拖拽功能。作者使用`onmousedown`、`onmousemove`和`onmouseup`事件来监听鼠标操作，并通过计算鼠标相对于元素的初始位置来更新元素的位置。同时，代码中还包含了防止元素超出页面边界的条件判断，确保了拖拽过程中的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>限制范围的拖拽</title>
	<style>
		#div1{
			width:100px;
			height:100px;
			background:red;
			position:absolute;
		}
		img{
			position: absolute;
		}
	</style>
	<script type="text/javascript">
		window.onload = function(){
			var oDiv = document.getElementById("div1");
			var oImg = document.getElementById("img1");
			drag( oDiv);
			drag( oImg);
			function drag(obj){
				obj .onmousedown = function(ev){
				var ev = ev||event;
				var disX = ev.clientX-this.offsetLeft;
				var disY = ev.clientY-this.offsetTop;
				if(obj.setCapture){
					obj.setCapture();
				}
				document.onmousemove= function(ev){
					var ev = ev||event;
					var L = ev.clientX-disX;
					var T = ev.clientY-disY;
					if(L<0 ){
						L = 0;
					}else if(L>document.documentElement.clientWidth-obj.offsetWidth){
						L = document.documentElement.clientWidth-obj.offsetWidth;
					}
					if(T<0 ){
						T= 0;
					}else if(T>document.documentElement.clientHeight-obj.offsetHeight){
						T = document.documentElement.clientHeight-obj.offsetHeight;
					}//先判断并设置L和T的值，再设置left和top 值为有更好的用户体验效果。

					obj.style.left = L +"px";
					obj.style.top= T +"px";
				}
				document.onmouseup = function(){
					document.onmousemove = null;
					if(obj.releaseCapture){
						obj.releaseCapture();
					}
				}
				return false;//取消事件的默认行为
			}
		}



			
		}
	</script>
</head>
<body>
	fdsgdfdsfsdf	
	<div id="div1"></div>
	<img id="img1" src="../img/cake2.jpg">
</body>
</html>