元素在有限范围内拖拽及磁性吸附

最新推荐文章于 2022-03-01 10:50:51 发布

原创最新推荐文章于 2022-03-01 10:50:51 发布 · 403 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何使用JavaScript实现元素在页面上的拖拽功能，并加入磁性吸附效果，确保元素只能在限定范围内移动，提升用户体验。

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

JS中元素在有限范围内拖拽及磁性吸附

这是我的第一篇博客。

一、在有限范围内的拖拽

原理：也就是在拖拽过程中，我们让元素在规定的范围内拖拽。在移动的过程中，我们对ev.client-oLeft/oTop的值进行限定。实现过程：将ev.client-oLeft/oTop的值分别用变量存储起来，然后用if语句判断这个值的大小即可。我们以此来做一个实例。让元素只能在可视区中移动。以下是实现代码

   <script>
window.onload = function() {
	
	var oDiv = document.getElementById('div")
	
	drag(oDiv);
	
	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;
				}
				
				obj.style.left = L + 'px';
				obj.style.top = T + 'px';
				
			}
			
			document.onmouseup = function() {
				document.onmousemove = document.onmouseup = null;
				if ( obj.releaseCapture ) {
					obj.releaseCapture();
				}
			}
			
			return false;
			
		}
		
	}
	
}
</script>

  

在线操作

二、磁性吸附

磁性吸附也就是当鼠标将元素移动到某一个另元素附近时，元素直接被吸引过去。原理：其实这个也是一种在有限范围内移动。只是将上述的代码中变量L和T的值限定一个范围比如说，我们让元素在离文档距离200px的时候，元素就直接吸附上去。

   <script>
window.onload = function() {
	
	var oDiv = document.getElementById('div');
	
	drag(oDiv);
	
	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 < 100 ) {
					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;
				}
				
				obj.style.left = L + 'px';
				obj.style.top = T + 'px';
				
			}
			
			document.onmouseup = function() {
				document.onmousemove = document.onmouseup = null;
				if ( obj.releaseCapture ) {
					obj.releaseCapture();
				}
			}
			
			return false;
			
		}
		
	}
	
}
</script>

  

在线操作