JavaScript实现简单拖拽功能

声明:笔者为初学菜鸟,若有不妥当之处,还望不吝赐教。

实现效果:点击鼠标并移动,红色方块跟着鼠标动松开鼠标后,
再次移动鼠标,方块不动。

封装拖拽函数

要移动的小方块为:

<div style="width: 100px;height: 100px;background-color:
		 red;position: absolute;left:0;top: 0;"></div>

完整代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div style="width: 100px;height: 100px;background-
					color: red;position: absolute;left:0;
					top: 0;"></div>
	<script>
		//封装拖拽函数
		function drag(elem){
			var disX,  		//disX disY 为鼠标点击位置与
				disY;		//dom元素左顶点的相对距离
				//!addEvent();  getStyle();stopBubble(); cancelHandler()均为封装的兼容性方法; 
			addEvent(elem,"mousedown",function(e){
				var event = e || window.event; //兼容事件对象
				disX = event.clientX - parseInt(getStyle(elem,'left'));
				disY = event.clientY - parseInt(getStyle(elem,'top'));
				addEvent(document,'mousemove',mouseMove);//若放在div元素上,会导致鼠标移动过快(超出div所在区域)
														//而不能监听到mousemove事件
				addEvent(document,'mouseup',mouseUp);
				stopBubble(event);
				cancelHandler(event);
		  
			});
			//鼠标移动时所要执行的操作
			function  mouseMove(e){
				var event = e || window.event;
				elem.style.left = event.clientX - disX + 'px'; //移动时鼠标所在点始终与元素左顶点相距disX个距离
				elem.style.top = event.clientY - disY  + 'px';
			}
			//抬起鼠标,取消所绑定的事件
			function mouseUp(e){
				var event = e || window. event;
				removeEvent(document,'mousemove',mouseMove);
				removeEvent(document,'mouseup',mouseUp);
			}
		}

		// 查找dom元素的属性的兼容性方法 getStyle(elem,prop)  prop为字符串格式
		function getStyle (elem, prop){
				if(window.getComputedStyle){
					return window.getComputedStyle(elem,null)[prop];
				}else{
					return elem.currentStyle[prop];
				}
			}
		
		//给一个dom对象添加该事件类型处理函数方法
		function addEvent(elem, type, handle){ //要处理的对象 事件类型(字符串) 处理函数
			if(elem.addEventListener){
				elem.addEventListener(type, handle, false);
			}else if(elem.attachEvent){
				elem.attachEvent('on' + type,function(){
					handle.call(elem);
				})
			}else{
				elem['on' + type] = handle;
			}
		}
		// 取消dom对象某一 事件类型处理函数 方法
		function removeEvent(elem, type, handle){
			if(elem.removeEventListener){
				elem.removeEventListener(type, handle, false);
			}else if(elem.detachEvent){
				elem.detachEvent('on' + type,function(){
					handle.call(elem);
				})
			}else{
				elem['on' + type] = null;
			}
		}
		// 取消冒泡的函数 stopBubble(event);
		function stopBubble(event){
			if(event.stopPropagation){
				event.stopPropagation();
			}else{
				event.cancelBubble = true;
			}
		}
		// 封装阻止默认事件的函数:cancelHandler(event)
		function cancelHandler(event){
			if(event.preventDefault){
				event.preventDefault();
			}else{
				event.returnValue = false;
			}
		}

		var div = document.getElementsByTagName('div')[0];
		drag(div);
	</script>
	
</body>
</html>

注意: DIV CSS left right top bottom定位 这四个CSS属性样式用于定位对象盒子,必须定义position属性值为absolute或者relative。否则不会显示出作用效果。

Left 当前元素的左侧与父元素左侧(就是原来默认位置)的距离值。
Right 当前元素的右侧与父元素右侧的距离值。
Top 当前对象顶部距离原位置顶部距离多少。
Bottom 当前对象底部距离原位置距离多少

你可能感兴趣的:(javascript,html,前端)