JavaScript 拖放效果.doc

拖放效果，也叫拖拽，学名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); 这样一个简单的拖放程序就做好了，下面说说其他扩展和细节部分。 【拖放锁定】 锁定分三种，分别是：水平方向锁定(LockX)、垂直方向锁定(LockY)、完全锁定(Lock)。 这个比较简单，水平和垂直方向的锁定只要在Move判断是否锁定再设置left和top就行，如果是完全锁定就直接返回。 if(!this.LockX){ this.Drag.style.left = ...; } if(!this.LockY){ this.Drag.style.top = ...; } 【触发对象】 触发对象是用来触发拖放程序的。有的时候不需要整个拖放对象都用来触发，这时就需要触发对象了。 使用了触发对象后，进行移动的还是拖放对象，只是用触发对象来触发拖放（一般的使用是把触发对象放到拖放对象里面）。 【范围限制】 要设置范围限制必须先把Limit设为true。范围限制分两种，分别是固定范围和容器范围限制，主要在Move程序中设置。 原理是当比较的值超过范围时，修正left和top要设置的值使拖放对象能保持在设置的范围内。 【固定范围限制】 容器范围限制就是指定上下左右的拖放范围。 各个属性的意思是： 上(mxTop)：top限制； 下(mxBottom)：top+offsetHeight限制； 左(mxLeft)：left限制； 右(mxRight)：left+offsetWidt