内容发布更新时间 : 2024/11/14 13:18:35星期一 下面是文章的全部内容请认真阅读。
这篇文章主要为大家详细介绍了js拖拽的原型声明和用法总结，感兴趣的朋友可以参考一下
下面是自己写的一个关于js的拖拽的原型声明：代码如下 需要注意的问题包括:
1.this的指向到底是指向谁--弄清楚所指的对象 2.call()方法的使用
3.直接将父级原型赋给子级与使用for将其赋给子级有什么区别？ 比如： 代码如下:
for(var i in Drag.prototype) {
LimitDrag.prototype[i]=Drag.prototype[i];----------子级发生改变，其父级并不会受到影响 }
LimitDrag.prototype=Drag.prototype；---------直接将原型赋给子级，会导致当子级发生改变时，其父级也会随之而改变。 代码如下: <html> <head> <style>
#div1 {width:100px; height:100px; background:red; position:absolute;} #div2 {width:100px; height:100px; background:yellow; position:absolute;} </style>
<meta http-equiv=\ <title>拖拽--面向对象</title> <script>
window.onload=function() {
new Drag('div1');
new LimitDrag('div2'); }
function Drag(id) {
var _this=this;//这个this表示p1 this.disx=0; this.disy=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; };
//继承Drag的所有属性 function LimitDrag(id) {
Drag.call(this,id);//这个this指LimitDrag new的对象 }
//得到Drag的方法,遍历其原型 for(var i in Drag.prototype) {
LimitDrag.prototype[i]=Drag.prototype[i]; }
//改变Drag的fnMove的方法
LimitDrag.prototype.fnMove=function(ev) {
var oEvent=ev||event;
var l=oEvent.clientX-this.disx; var t=oEvent.clientY-this.disy;
if(l>document.documentElement.clientWidth-this.oDiv.offsetWidth) {
l=document.documentElement.clientWidth-this.oDiv.offsetWidth; }
else if(l<0) {
l=0; }
if(t>document.documentElement.clientHeight-this.oDiv.offsetHeight) {
t=document.documentElement.clientHeight-this.oDiv.offsetHeight; }
else if(t<0) {
t=0; }
this.oDiv.style.left=l+'px'; this.oDiv.style.top=t+'px'; }
</script> </head> <body>
<div id=\</div>
<div id=\</div> </body> </html>
以上就是本文的全部内容，希望对大家的学习有所帮助。