js面向对象拖拽

小咪咪 2022-03-29 02:44 274阅读 0赞

##### drag.js实现拖拽，没有控制边界，使用dragLimit.js继承drag.js再实现了边界控制 #####

> drag.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>js面向对象拖拽</title>
        <style>
            body {
                    padding: 0;
                    margin: 0;
                }
                div {
                    position: absolute;
                    background: blue;width: 100px;height: 300px;
                }
            </style>
    </head>
    <body>
        <div id="box"></div>
    
        <script type="text/javascript" src="js/drag.js"></script>
        <script type="text/javascript" src="js/dragLimit.js"></script>
        <script>
        window.onload = function() {
            new DragLimit("box");
        };
        </script>
    </body>
    </html>

> draj.js

/**
     * 面向对象拖拽
     * @param {Object} [id] [拖拽目标div的id]
     */
    function Drag(id){
    	this.oBox=document.getElementById(id);
    	this.disX=0;
    	this.disY=0;
    
    	var _this=this;
    	this.oBox.onmousedown=function(){
    		_this.fnDown();
    	}
    }
    
    // 鼠标按下
    Drag.prototype.fnDown=function(ev){
    	var oEvent=ev||event;
    	this.disX=oEvent.clientX-this.oBox.offsetLeft;
    	this.disY=oEvent.clientY-this.oBox.offsetTop;
    
    	var _this=this;
    	document.onmousemove=function(){
    		_this.fnMove();
    	}
    
    	document.onmouseup=function(){
    		_this.fnUp();
    	}
    }
    
    // 鼠标移动
    Drag.prototype.fnMove=function(ev){
    	var oEvent=ev||event;
    	this.oBox.style.left=oEvent.clientX-this.disX+'px';
    	this.oBox.style.top=oEvent.clientY-this.disY+'px';
    }
    
    // 鼠标抬起
    Drag.prototype.fnUp=function(){
    	document.onmousemove=null;
    	document.onmouseup=null;
    }

> dragLimit.js

/**
     * 限制边界的拖拽，继承自Drag
     * @param {Object} [id] [description]
     */
    function DragLimit(id){
    	Drag.call(this,id);
    }
    
    // 继承方法
    for(var p in Drag.prototype){
    	DragLimit.prototype[p]=Drag.prototype[p];
    }
    
    /**
     * 覆写父类的鼠标移动方法，控制不能移出边界
     */
    DragLimit.prototype.fnMove=function(ev){
    	var oEvent=ev||event;
    	var left=oEvent.clientX-this.disX;
    	var top=oEvent.clientY-this.disY;
    
    	if(left<0){
    		left=0;
    	}else if(left>document.documentElement.clientWidth-this.oBox.offsetWidth){
    		left=document.documentElement.clientWidth-this.oBox.offsetWidth;
    	}
    
    	if(top<0){
    		top=0;
    	}else if(top>document.documentElement.clientHeight-this.oBox.offsetHeight){
    		top=document.documentElement.clientHeight-this.oBox.offsetHeight;
    	}
    
    	this.oBox.style.left=left+'px';
    	this.oBox.style.top=top+'px';
    }