首页 > 代码库 > 面向对象的拖拽
面向对象的拖拽
1、创建一个div,并简单设置样式
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> #div1 { width: 150px; height: 150px; background-color: yellow; position: absolute; } </style> </head><body> <div id="div1"></div></body></html>
2、面向过程的方式实现拖拽功能
<script type="text/javascript"> window.onload = function () { var oDiv = document.getElementById("div1"); oDiv.onmousedown = function (e) { var oEvent = e || event; var divX = oEvent.clientX - oDiv.offsetLeft; var divY = oEvent.clientY - oDiv.offsetTop; document.onmousemove = function (e) { var oEvent = e || event; oDiv.style.left = oEvent.clientX - divX + "px"; oDiv.style.top = oEvent.clientY - divY + "px"; }; document.onmouseup = function () { document.onmousemove = null; document.onmouseup = null; } }; }; </script>
3、面向对象方式实现
<script type="text/javascript"> window.onload = function () { new Drag("div1"); }; function Drag(id) { var _this = this;//保存this,指的是Drag，当 new Drag("div1");this变成了div1 this.divX = 0; this.divY = 0; this.oDiv = document.getElementById(id); this.oDiv.onmousedown = function (e) { _this.fnDown(e); return false;
}; } Drag.prototype.fnDown = function (e) { var _this = this; var oEvent = e || event; this.divX = oEvent.clientX - this.oDiv.offsetLeft; this.divY = oEvent.clientY - this.oDiv.offsetTop; document.onmousemove = function (e) { _this.fnMove(e); }; document.onmouseup = function () { _this.fnUp(); }; } Drag.prototype.fnMove = function (e) { var oEvent = e || event; this.oDiv.style.left = oEvent.clientX - this.divX + "px"; this.oDiv.style.top = oEvent.clientY - this.divY + "px"; } Drag.prototype.fnUp = function () { document.onmousemove = null; document.onmouseup = null; } </script>
4、在创建一个div
<style type="text/css"> #div1, #div2 { width: 150px; height: 150px; background-color: yellow; position: absolute; } #div2 { width: 150px; height: 150px; position: absolute; background-color: green; } </style><body> <div id="div1">普通拖拽</div> <div id="div2">限制范围拖拽</div></body>
5、限制范围的拖拽功能直接继承Drag
function LimitDrag(id) { Drag.call(this, id);//LimitDrag继承Drag}//这样写，避免扩展LimitDrag时影响Dragfor (var i in Drag.prototype) { LimitDrag.prototype[i] = Drag.prototype[i];}
<script type="text/javascript"> window.onload = function () { new Drag("div1"); new LimitDrag("div2"); }; </script>
6、扩展LimitDrag
//扩展LimitDrag，其实就是重写了父类的fnMove方法LimitDrag.prototype.fnMove = function (e) { var oEvent = e || event; var l = oEvent.clientX - this.divX; var t = oEvent.clientY - this.divY; if (l < 0) { l = 0; } else if (l > document.documentElement.clientWidth - this.oDiv.offsetWidth) { l = document.documentElement.clientWidth - this.oDiv.offsetWidth; } this.oDiv.style.left = l + "px"; this.oDiv.style.top = t + "px";}
参考资料：http://v.pps.tv/play_362R1J.html
面向对象的拖拽
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。