微客导航 » 文章资讯 » JS面向对象编程实现的拖拽功能案例详解

JS面向对象编程实现的拖拽功能案例详解

2023-07-29 21:46:03 147

本文实例讲述了JS面向对象编程实现的拖拽功能。分享给大家供大家参考，具体如下：

原始的面向过程代码：






拖拽

下面是面向对象的代码

drag.js

/**
*拖拽
*@param{Object}iddiv的id
*/
functionDrag(id){
this.oBox=document.getElementById(id);
this.disX=0;
this.disY=0;

var_this=this;

this.oBox.onmousedown=function(){
_this.fnDown();
}
}
//鼠标按下
Drag.prototype.fnDown=function(ev){
varoEvent=ev||event;

this.disX=oEvent.clientX-this.oBox.offsetLeft;
this.disY=oEvent.clientY-this.oBox.offsetTop;

var_this=this;

document.onmousemove=function(){
_this.fnMove();
};
document.onmouseup=function(){
_this.fnUp();
};
}
//鼠标移动
Drag.prototype.fnMove=function(ev){
varoEvent=ev||event;

this.oBox.style.left=oEvent.clientX-this.disX+'px';
this.oBox.style.top=oEvent.clientY-this.disY+'px';
}
//鼠标抬起
Drag.prototype.fnUp=function(){
document.onmousemove=null;
document.onmouseup=null;
}

drag.html






拖拽

此拖拽有一个问题，就是没有控制拖拽出边界的问题。但我们又不想去修改代码，那我们怎么做？学过java的应该都知道可以写一个子类来做一些更加具体的操作，又保留了父类的功能，就是继承。

html

DragLimit.js：DragLimit继承自Drag，控制了不能出边界

/**
*限制边界的拖拽，继承自Drag
*@param{Object}id
*/
functionDragLimit(id){
Drag.call(this,id);
}
//继承方法
for(varpinDrag.prototype){
DragLimit.prototype[p]=Drag.prototype[p];
}
/**
*覆写父类的鼠标移动方法，控制不能移出边界
*/
DragLimit.prototype.fnMove=function(ev){
varoEvent=ev||event;

varleft=oEvent.clientX-this.disX;
vartop=oEvent.clientY-this.disY;

//控制边界
if(left<0){
left=0;
}elseif(left>document.documentElement.clientWidth-this.oBox.offsetWidth){
left=document.documentElement.clientWidth-this.oBox.offsetWidth;
}
if(top<=0){
top=0;
}elseif(top>document.documentElement.clientHeight-this.oBox.offsetHeight){
top=document.documentElement.clientHeight-this.oBox.offsetHeight;
}

this.oBox.style.left=left+'px';
this.oBox.style.top=top+'px';
}

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

JS面向对象编程实现的拖拽功能案例详解

热门推荐

随机推荐