拖放效果JavaScript讲解

拖放效果（拖拽）是常见的JS特效之一，学名Drag-and-drop 。
首先是程序原理：以SimpleDrag为例来说基本原理，首先初始化程序要有一个拖放对象。

this.Drag = (drag);

用两个参数来记录开始时鼠标相对拖放对象的坐标

this._x = this._y = 0;

对于添加移除事件，还要用到两个事件对象事件函数分别是拖动程序和停止拖动程序

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

拖动对象必须是绝对定位

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

最后把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);

如此一来一个简单的拖放程序就ok了！！！
扩展细节详见下一篇.....

石家庄网页设计、css+div、网站建设