js面向对象练习（一）：拖曳效果-创新互联

html:

成都创新互联于2013年开始，先为市中等服务建站，市中等地企业，进行企业商务咨询服务。为市中企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8">
<title></title>
<!--<script src="jquery-1.9.1.min.js"></script>-->


<style>

#drag{
	background: red;
	width: 200px;
	height: 200px;
	cursor: move;
	position: fixed;
	top: 0;
	left: 0;
}
</style>
</head>
<body>
	<div id="drag"></div>
<script src="scripts/test.js"></script>
</body>
</html>

js:

window.onload = function(){
	var drag = new Drag("drag");
	drag.init();
}
//获取浏览器窗口宽度
function getInner(){
	var pageWidth = window.innerWidth;
	var pageHeight = window.innerHeight;
	if(typeof pageWidth != "number"){
		if(document.compatMode == "CSS1Compat"){
			pageWidth = document.documentElement.clientWidth;
			pageHeight = document.documentElement.clientHeight;
		}else {
			pageWidth = document.body.clientWidth;
			pageHeight = document.body.clientHeight;
		}
	}
	return {width:pageWidth,height:pageHeight};
}
//构造函数
function Drag(id){
	this.obj = document.getElementById("drag");
	this.disx = 0;
	this.disy = 0;
}

Drag.prototype.init = function(){
	//this 指针
	var me = this;
	this.obj.||event;
		me.onmouseDown(e);
		//阻止默认事件
		return false;
	}
}

Drag.prototype.onmouseDown = function(e){
	//this指针
	var me = this;
	this.disx = e.clientX - this.obj.offsetLeft;
	this.disy = e.clientY - this.obj.offsetTop;
	document.||event;
		me.onmouseMove(e);
	}
	document.onmouseup = function(){
		me.mouseUp();
	}
}


Drag.prototype.onmouseMove = function (e){
	//this指针
	var lf = e.clientX - this.disx;
	var tp = e.clientY - this.disy;
	
	if(lf < 0){ //防止拖曳层超出左边界
		lf = 0;
	}else if(lf > getInner().width - this.obj.offsetWidth){
		lf = getInner().width - this.obj.offsetWidth;//防止拖曳层超出右边界
	}
	if(tp < 0){
		tp = 0;//防止拖曳层超出上边界
	}else if(tp > getInner().height - this.obj.offsetHeight){
		tp = getInner().height - this.obj.offsetHeight;//防止拖曳层超出下边界
	}
	this.obj.style.left = lf + 'px';
	this.obj.style.top = tp + 'px';
};

Drag.prototype.mouseUp = function (){
 document.onmousemove = null;
 document.onmouseup = null;
};

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

当前名称：js面向对象练习（一）：拖曳效果-创新互联
路径分享：https://www.cdcxhl.com/article34/hiise.html

成都网站建设公司_创新互联，为您提供搜索引擎优化、移动网站建设、网站维护、网站设计、App设计、网站排名

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容