JavaScript 拖放效果 —— 小拖放也有大智慧

核心提示： this._x=oEvent.clientX-this.Drag.offsetLeft;this._y=oEvent.clientY-this.Drag.offsetTop;并把_fM拖动程序和_fS停止拖动程序分别绑定到document的mousemove和mouseup事件：addEv

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);

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

【拖放锁定】

锁定分三种，分别是：水平方向锁定(LockX)、垂直方向锁定(LockY)、完全锁定(Lock)。

这个比较简单，水平和垂直方向的锁定只要在Move判断是否锁定再设置left和top就行，如果是完全锁定就直接返回。

if(!this.LockX){this.Drag.style.left=…;}
if(!this.LockY){this.Drag.style.top=…;}

【触发对象】

触发对象是用来触发拖放程序的。有的时候不需要整个拖放对象都用来触发，这时就需要触发对象了。