Javascript教程:拖放效果研究

【 tulaoshi.com - Web开发 】

拖放效果，也叫拖拽，学名Drag-and-drop ，是最常见的js特效之一。
如果忽略很多细节，实现起来很简单，但往往细节才是难点所在。
这个程序的原型是在做图片切割效果的时候做出来的，那时参考了好几个同类的效果，跟muxrwc和BlueDestiny学习了不少东西。
虽然每次整理都觉得很好了，不过每隔一段时间又会发现得某个地方可以改善，某个地方有错误，某些需求需要实现，就像自己学习的知识那样。

这里考虑到有的人可能只需要简单的拖放，所以有一个 简化版的拖放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);

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