工作需要写的一个js拖拽组件

 更新时间:2011年07月28日 08:02:32   作者:  
工作需要写的一个js拖拽组件,需要的朋友可以参考下代码。
复制代码 代码如下:

/*
*使用方法:
* var d = new Drag({id:'dragPannel',maxLeft:500,maxTop:200});
* d.ready();
*请注意:
* 拖动对象的left和top样式必须写在其style属性里边
*
*/
//矫正调用者。将 fn 作为 newObj 的方法调用
function repairCaller(newObj, fn){
return function(){
return fn.apply(newObj, arguments);
}
}
function Drag( config ){
this.moveTarget = T.dom.get( config.id );
this.startLeft = parseInt(this.moveTarget.style.left); //每次拖动开始时被拖动对象的 left,top
this.startTop = parseInt(this.moveTarget.style.top);
this.startClientX = this.startLeft; //保存拖动开始时事件的 clientX, clientY
this.startClientY = this.startTop;
this.MAX_LEFT = config.maxLeft||document.documentElement.clientWidth - this.moveTarget.offsetWidth; //元素可以移动的最大范围
this.MAX_TOP = config.maxTop||document.documentElement.clientHeight - this.moveTarget.offsetHeight;
this.lock = true;
}
Drag.prototype.ready = function(){
//绑定事件
T.bind(document, "mousedown", repairCaller(this,this.down));
T.bind(document, "mousemove", repairCaller(this,this.move));
T.bind(document, "mouseup", repairCaller(this,this.stop));
}
Drag.prototype.down = function(){
//取得事件对象
var event = T.event.getEvent(arguments[0]),
target = T.event.getTarget(event);
if (target == this.moveTarget){
this.lock = false;
//在事件开始时保存各种坐标位置
this.startLeft = parseInt(this.moveTarget.style.left);
this.startTop = parseInt(this.moveTarget.style.top);
this.startClientX = event.clientX;
this.startClientY = event.clientY;
}
};
Drag.prototype.move = function(){
if(!this.lock ){
//取得事件对象
var event = T.event.getEvent(arguments[0]),
target = T.event.getTarget(event);
if(target == this.moveTarget){
//如有选择内容,清除之
//window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
//凑数拖动范围有没超过最大限制
var realLeft = this.startLeft + event.clientX - this.startClientX, //实际的移动范围
realTop = this.startTop + event.clientY - this.startClientY,
rightLeft , rightTop; //正确的 left, top 取值
rightLeft = realLeft > this.MAX_LEFT ? this.MAX_LEFT : ( realLeft > 0 ? realLeft : 0 );
rightTop = realTop > this.MAX_TOP ? this.MAX_TOP : ( realTop > 0 ? realTop : 0 );
this.moveTarget.style.left = rightLeft + "px";
this.moveTarget.style.top = rightTop + "px";
}
else{
this.lock = true;
}
}
};
Drag.prototype.stop = function(){
this.lock = true
};

后记:
在写的过程中非常需要注意的几点是:
1、拖动层的 position、left 和 top 必须写在 style 里
2、移动过程中设置 left 和 top 要带单位,否则不起作用
3、多级 div 嵌套时需要给父 div 加 over-flow:hidden 样式
完毕!

相关文章

  • 屏蔽网页右键复制和ctrl+c复制的js代码

    屏蔽网页右键复制和ctrl+c复制的js代码

    解决的方法就是直接把网页保存下来然后删掉下面这段js代码,然后就可以正常用右键菜单,也可以通过设置浏览器的安全级别到最高级别来解决问题
    2013-01-01
  • TypeScript命名空间讲解

    TypeScript命名空间讲解

    这篇文章主要介绍了TypeScript命名空间,TypeScript 是 JavaScript 的一个超集,支持 ECMAScript 6 标准。由微软开发的自由和开源的编程语言。设计目标是开发大型应用,它可以编译成纯 JavaScript,编译出来的 JavaScript 可以运行在任何浏览器上,下面来看详细内容吧

    2021-12-12
  • uniapp中uni.request(OBJECT)接口请求封装实例代码

    uniapp中uni.request(OBJECT)接口请求封装实例代码

    在开发的时候经常会用到前端请求后端接口,每次的请求都会出现地址不一样,参数不一样,方式不一样等等情况,下面这篇文章主要给大家介绍了关于uniapp中uni.request(OBJECT)接口请求封装的相关资料,需要的朋友可以参考下
    2022-12-12
  • JavaScript正则获取地址栏中参数的方法

    JavaScript正则获取地址栏中参数的方法

    这篇文章主要介绍了JavaScript正则获取地址栏中参数的方法,涉及javascript基于正则的字符串截取操作相关实现技巧,需要的朋友可以参考下
    2017-03-03
  • js中base64与file之间的转换方法

    js中base64与file之间的转换方法

    这篇文章主要给大家介绍了关于js中base64与file之间的转换方法,最近项目中需要实现把图片的base64编码转成file文件的功能,然后再上传至服务器,需要的朋友可以参考下
    2023-09-09
  • 监控用户是否关闭浏览器的js代码

    监控用户是否关闭浏览器的js代码

    BS系统一个非常烦人的地方是不知道用户什么时候关闭浏览器离开系统.这里,我们采用onbeforeunload参数监控用户是否关闭浏览器.
    2009-08-08
  • JavaScript实现继承的7种方式总结

    JavaScript实现继承的7种方式总结

    用官方点的话讲继承是面向对象三大特征之一,可以使得子类具有父类的属性和方法,同时还可以在子类中重新定义以及追加属性和方法。本文整理了JavaScript实现继承的7种方式,需要的可以了解一下
    2023-04-04
  • javascript attachEvent和addEventListener使用方法

    javascript attachEvent和addEventListener使用方法

    attachEvent与addEventListener区别 适应的浏览器版本不同,同时在使用的过程中要注意
    2009-03-03
  • JavaScript生成二维数组的多种方法小结

    JavaScript生成二维数组的多种方法小结

    我经常在面试中问候:你能用 JavaScript 生成一个二维数组吗?这个问题看似简单,实际上却能揭示出面试者对 JavaScript 的熟练程度,天,就让我们一起来探索这个问题背后的答案,揭开生成二维数组的多种秘密,需要的朋友可以参考下
    2024-04-04
  • javascript制作坦克大战全纪录(2)

    javascript制作坦克大战全纪录(2)

    上文我们简单的完成了坦克大战的雏形,本文我们来继续完善坦克大战,接下来我们来学习制作地图和碰撞检测方面的问题。
    2014-11-11

最新评论