JS----拖拽图层，面向过程，面向对象

来源：互联网发布：淘宝客服是怎么做的编辑：程序博客网时间：2024/06/06 07:51

拖拽可以是图层也可以是图片

面向过程--升级到->面向对象

1. 直接调用：Drag插件,

2. 对Drag的插件进行扩展：LimitDrag插件，

<!doctype html><html><head><meta charset="utf-8"><title>拖拽效果由过程向OOP转</title><style>*{ margin:0; padding:0;}#div1{ width:100px; height:100px; background:#888; position:absolute;}#div2{ width:80px; height:80px; background:#66C; position:absolute;}</style></head><body><!--V0.1 面向过程的写法--><script>window.onload = function(){var oDiv = document.getElementById('div1');oDiv.onmousedown = function(ev){var oEvent = ev || event;//兼容代码var disX = oEvent.clientX - oDiv.offsetLeft;//offsetLeft: 为元素离左侧的距离var disY = oEvent.clientY - oDiv.offsetTop;document.onmousemove = function(ev){var oEvent = ev || event;oDiv.style.left = oEvent.clientX-disX+'px';//是原来的基础上增加或减少oDiv.style.top  = oEvent.clientY-disY+'px';}document.onmouseup = function(){document.onmousemove = null;document.onmouseup = null;}}}</script>

<!--V1.0 过渡OOP, 就是把所有方法抽取出来，单独存在--><script>var oDiv = null;var disX = 0;var disY = 0;window.onload = function(){oDiv = document.getElementById('div1');oDiv.onmousedown = fnDown;}function fnDown(ev){var oEvent = ev || event;//兼容代码disX = oEvent.clientX - oDiv.offsetLeft;//offsetLeft: 为元素离左侧的距离disY = oEvent.clientY - oDiv.offsetTop;document.onmousemove = fnMove;document.onmouseup = fnUp;}function fnMove(ev){var oEvent = ev || event;oDiv.style.left = oEvent.clientX-disX+'px';//是原来的基础上增加或减少oDiv.style.top  = oEvent.clientY-disY+'px';}function fnUp(){document.onmousemove = null;document.onmouseup = null;}</script>

<!--V2.0 纯OOP--><script>function Drag(id){var _this=this;this.disX=0;this.dixY=0;this.oDiv = document.getElementById(id);this.oDiv.onmousedown = function(ev){_this.fnDown(ev);return false;}}Drag.prototype.fnDown = function(ev){var _this = this;var oEvent = ev || event;this.disX = oEvent.clientX - this.oDiv.offsetLeft;this.disY = oEvent.clientY - this.oDiv.offsetTop;document.onmousemove = function(ev){_this.fnMove(ev);}document.onmouseup = function(){_this.fnUp()}}Drag.prototype.fnMove = function(ev){var oEvent = ev || event;this.oDiv.style.left = oEvent.clientX-this.disX+'px';this.oDiv.style.top  = oEvent.clientY-this.disY+'px';}Drag.prototype.fnUp = function(){document.onmousemove = null;document.onmouseup = null;}</script><script>window.onload = function(){new Drag('div1');}</script>

<!--扩展，继承 限制左右范围--><script>function LimitDrag(id){Drag.call(this, id);//继承属性}for(var i in Drag.prototype){LimitDrag.prototype[i] = Drag.prototype[i];//获取所有的方法}LimitDrag.prototype.fnMove = function(ev){var oEvent = ev || event;var l = oEvent.clientX-this.disX;var t = oEvent.clientY-this.disY;if(l<0)//对左右范围限制l=0;else if(l>document.documentElement.clientWidth-this.oDiv.offsetWidth)l = document.documentElement.clientWidth-this.oDiv.offsetWidth;if(t<0)//对上下范围限制t=0;else if(t>document.documentElement.clientHeight-this.oDiv.offsetHeight)t = document.documentElement.clientHeight-this.oDiv.offsetHeight;this.oDiv.style.left = l+'px';this.oDiv.style.top  = t+'px';}</script><script>window.onload = function(){new LimitDrag('div2');}</script>

<div id="div1">div1-Drag</div><div id="div2">div2-LimitDrag</div></body></html>

0 0