JavaScript 拖放效果

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

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

效果预览

ps：在maxthon下如果开启广告过滤的话很可能会被过滤掉（不知有什么方法可以避免）。

拖放状态：未开始

程序说明

【程序原理】

这里以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);

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

【拖放锁定】

锁定分三种，分别是：水平方向锁定(LockX)、垂直方向锁定(LockY)、完全锁定(Lock)。
这个比较简单，水平和垂直方向的锁定只要在Move判断是否锁定再设置left和top就行，如果是完全锁定就直接返回。

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

【触发对象】

触发对象是用来触发拖放程序的，程序中通过Handle属性设置。有的时候不需要整个拖放对象都用来触发，这时就需要触发对象了。
使用了触发对象后，进行移动的还是拖放对象，只是用触发对象来触发拖放（一般的使用是把触发对象放到拖放对象里面）。
ps：触发对象的另一个用法是通过设置相同的Handle，实现一个触发对象同时拖放多个拖放对象。

【范围限制】

要设置范围限制必须先把Limit设为true。范围限制分两种，分别是固定范围和容器范围限制，主要在Move程序中设置。
原理是当比较的值超过范围时，修正left和top要设置的值使拖放对象能保持在设置的范围内。

【固定范围限制】

容器范围限制就是指定上下左右的拖放范围。
各个属性的意思是：
上(mxTop)：top限制；
下(mxBottom)：top+offsetHeight限制；
左(mxLeft)：left限制；
右(mxRight)：left+offsetWidth限制。

如果范围设置不正确，可能导致上下或左右同时超过范围的情况，程序中有一个Repair程序用来修正范围参数的。
Repair程序会在程序初始化和Start程序中执行，在Repair程序中修正mxRight和mxBottom：

this .mxRight  =  Math.max( this .mxRight,  this .mxLeft  +   this .Drag.offsetWidth);
this .mxBottom  =  Math.max( this .mxBottom,  this .mxTop  +   this .Drag.offsetHeight);

其中mxLeft+offsetWidth和mxTop+offsetHeight分别是mxRight和mxBottom的最小范围值。

根据范围参数修正移动参数：

iLeft  =  Math.max(Math.min(iLeft, mxRight  -   this .Drag.offsetWidth), mxLeft);
iTop  =  Math.max(Math.min(iTop, mxBottom  -   this .Drag.offsetHeight), mxTop);

对于左边上边要取更大的值，对于右边下面就要取更小的值。

【容器范围限制】

容器范围限制的意思就是把范围限制在一个容器_mxContainer内。
要注意的是拖放对象必须包含在_mxContainer中，因为程序中是使用相对定位来设置容器范围限制的（如果是在容器外就要用绝对定位，这样处理就比较麻烦了），还有就是容器空间要比拖放对象大，这个就不用说明了吧。
原理跟固定范围限制差不多，只是范围参数是根据容器的属性的设置的。

当设置了容器，在Repair程序如果容器的position不是relative或absolute，会自动把position设为relative来相对定位：

! this ._mxContainer  ||  CurrentStyle( this ._mxContainer).position  ==   " relative "   ||  CurrentStyle( this ._mxContainer).position  ==   " absolute "   ||  ( this ._mxContainer.style.position  =   " relative " );

ps：其中CurrentStyle是用来获取最终样式（详细看这里的最终样式部分）。

注意如果在程序执行之前设置过拖放对象的left和top而容器没有设置relative，在自动设置relative时会发生移位现象，所以程序在初始化时就执行一次Repair程序防止这种情况。因为offsetLeft和offsetTop要在设置relative之前获取才能正确获取值，所以在Start程序中Repair要在设置_x和_y之前执行。

由于是相对定位，对于容器范围来说范围参数上下左右的值分别是0、clientHeight、0、clientWidth。
clientWidth和clientHeight是容器可视部分的宽度和高度（详细参考这里）。
为了容器范围能兼容固定范围的参数，程序中会获取容器范围和固定范围中范围更小的值：

Code
原文地址：http://www.cnblogs.com/cloudgamer/archive/2008/11/17/Drag.html

完整实例下载

转载请注明出处：http://www.cnblogs.com/cloudgamer/

如有任何建议或疑问，欢迎留言讨论。

如果觉得文章不错的话，欢迎点一下右下角的推荐。

程序中包含的js工具库CJL.0.1.min.js，原文在这里。