拷贝继承实现拖拽

ゞ浴缸里的玫瑰 2022-06-14 05:52 273阅读 0赞

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>继承的拖拽</title>
    		
    		<style>
    			#div1{width: 100px;height: 100px;background: red;position: absolute;cursor: pointer;}
    			#div2{width: 100px;height: 100px;background: yellow;position: absolute;left: 100px;cursor: pointer;}
    		</style>
    	</head>
    	<body>
    		<div id = 'div1'></div>
    		<div id = 'div2'></div>
    		<script>
    			window.onload = function(){
    				var d1 = new Drag('div1');
    				d1.init();
    				var d2 = new childDrag('div2');
    				d2.init();
    			};
    			
    			function Drag(id){    // 父类
    				this.obj = document.getElementById(id);
    				this.disX = 0;
    				this.disY = 0;
    			}
    			
    			Drag.prototype.init = function(){
    				var This = this;
    				this.obj.onmousedown = function(ev){
    					var ev = ev || window.event;
    					This.fnDown(ev);
    					
    					document.onmousemove = function(ev){
    						var ev = ev || window.event;
    						This.fnMove(ev);
    					};
    					
    					document.on,onmouseup = function(){
    						This.fnUp();
    					};
    					
    					// 阻止默认事件
    					return false;  
    				};
    			};
    			
    			Drag.prototype.fnDown = function(ev){
    				this.disX = ev.clientX - this.obj.offsetLeft;
    				this.disY = ev.clientY - this.obj.offsetTop;
    			};
    			
    			Drag.prototype.fnMove =function(ev){
    				this.obj.style.left = ev.clientX - this.disX + 'px';
    				this.obj.style.top = ev.clientY - this.disY + 'px';
    			};
    			
    			Drag.prototype.fnUp = function(){
    				document.onmousemove = null;
    				document.onmouseup = null;
    			};
    			 
    			function childDrag(id){    //子类
    				// 继承父类属性
    				Drag.call(this,id);  
    			}
    			
    			// 实现继承父类方法
    			extend(childDrag.prototype,Drag.prototype);
    			
    			//封装方法　通过for in 实现拷贝继承 父类方法
    			function extend(obj1,obj2){
    				for(var attr in obj2){
    					obj1[attr] = obj2[attr];
    				}
    			}
    			
    			// 重写子类的fnMove方法 限制子类拖拽范围在可视区域
    			childDrag.prototype.fnMove =function(ev){
    				var L = ev.clientX - this.disX;
    				var T = ev.clientY - this.disY;
    				if(L < 0){
    					L = 0;
    				}else if(L > document.documentElement.clientWidth - this.obj.offsetWidth){
    					L = document.documentElement.clientWidth - this.obj.offsetWidth;
    				}
    				
    				if(T < 0){
    					T = 0;
    				}else if(T > document.documentElement.clientHeight - this.obj.offsetHeight){
    					T = document.documentElement.clientHeight - this.obj.offsetHeight;
    				}
    				this.obj.style.left = L + 'px';
    				this.obj.style.top = T + 'px';
    			};
    		</script>
    	</body>
    </html>