標籤：js 物件導向
html:
<!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;};
js物件導向練習（一）：拖曳效果
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
