中国第一Ajax站长门户:www.okajax.com   虚拟主机 域名注册 云主机

javascript页面拖动效果的分析 - okajax.com - Ajax中国

我要投稿 会员登陆 RSS订阅 本站推荐:
您的位置主页 > Ajax技术 > Ajax技巧教程 > javascript页面拖动效果的分析

javascript页面拖动效果的分析

2008-11-24    文章来源:互联网    浏览次数:

你一定体会过igoogle,mybaidu的首页拖动效果,那么你可能觉得这是一个很高深的问题,其实不然,这个拖放效果,也叫拖拽,学名Drag-and-drop ,是最常见的js特效之一,今天我们就从原理到实现进行详细的分析。

这里考虑到有的人可能只需要简单的拖放,所以有一个简化版的拖放SimpleDrag ,方便学习,下载代码

标准效果  简化效果

程序原理

这里以SimpleDrag为例说一下基本原理。

首先初始化程序中要一个拖放对象:

this.Drag = $(drag);

还要两个参数在开始时记录鼠标相对拖放对象的坐标:

this._x = this._y = 0;

还有两个事件对象函数用于添加移除事件:

this._fM = BindAsEventListener(this, this.Move);
this._fS = Bind(this, this.Stop);

分别是拖动程序和停止拖动程序。
拖放对象的position必须是absolute绝对定位:

this.Drag.style.position = "absolute";

最后把Start开始拖放程序绑定到拖放对象mousedown事件:

addEventHandler(this.Drag, "mousedown", BindAsEventListener(this, this.Start));

鼠标在拖放对象按住,就会触发Start程序,主要是用来准备拖动,在这里记录鼠标相对拖放对象的坐标:

this._x = oEvent.clientX - this.Drag.offsetLeft;
this._y = oEvent.clientY - this.Drag.offsetTop;

并把_fM拖动程序和_fS停止拖动程序分别绑定到document的mousemove和mouseup事件:

addEventHandler(document, "mousemove", this._fM);
addEventHandler(document, "mouseup", this._fS);

绑定到document可以保证事件在整个窗口文档中都有效。

当鼠标在文档上移动时,就会触发Move程序了,这里就是实现拖动的程序。
通过现在鼠标的坐标值跟开始拖动时鼠标相对的坐标值的差就可以得到拖放对象应该设置的left和top了:

this.Drag.style.left = oEvent.clientX - this._x + "px";
this.Drag.style.top = oEvent.clientY - this._y + "px";

最后放开鼠标后就触发Stop程序结束拖放。
这里的主要作用是把Start程序中给document添加的事件移除:

removeEventHandler(document, "mousemove", this._fM);
removeEventHandler(document, "mouseup", this._fS);

这样一个简单的拖放程序就做好了,下面说说其他扩展和细节部分。

  • 第1页:javascript实现拖动的原理
  • 第2页:拖拽锁定、释放以及范围限制
  • 第3页:鼠标捕获、焦点丢失
  • 第4页:默认动作、清除选择
  • 文章评论(查看全部)

    看不清楚?单击换一张。
    loading.. 评论加载中....
    关于我们 - 广告服务 - 版权隐私 - 免责声明 - RSS地图 - 网站地图 - 使用帮助 - 返回顶部