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

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>

在线操作

---

• Previous
  currenStyle与getComputStyle的应用
• Next
  很有用的CSS技巧