JavaScript 拖放效果代码_javascript技巧-js教程-PHP中文網

这个程序的原型是在做图片切割效果的时候做出来的，那时参考了好几个同类的效果，跟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来相对定位：
!this._mxContainer || CurrentStyle(this._mxContainer).position == "relative" || (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
mxLeft = Math.max(mxLeft, 0);
mxTop = Math.max(mxTop, 0);
mxRight = Math.min(mxRight, this._mxContainer.clientWidth);
mxBottom = Math.min(mxBottom, this._mxContainer.clientHeight);
因为设置相对定位的关系，容器_mxContainer设置过后一般不要取消或修改，否则很容易造成移位异常。
【鼠标捕获】
我在一个拖放实例中看到，即使鼠标移动到浏览器外面，拖放程序依然能够执行，仔细查看后发现是用了setCapture。
鼠标捕获(setCapture)是这个程序的重点，作用是将鼠标事件捕获到当前文档的指定的对象。这个对象会为当前应用程序或整个系统接收所有鼠标事件。
使用很简单：
this._Handle.setCapture();
setCapture捕获以下鼠标事件：onmousedown、onmouseup、onmousemove、onclick、ondblclick、onmouseover和onmouseout。
程序中主要是要捕获onmousemove和onmouseup事件。
msdn的介绍中还说到setCapture有一个bool参数，用来设置在容器内的鼠标事件是否都被容器捕获。
容器就是指调用setCapture的对象，大概意思就是：
参数为true时（默认）容器会捕获容器内所有对象的鼠标事件，即容器内的对象不会触发鼠标事件（跟容器外的对象一样）；
参数为false时容器不会捕获容器内对象的鼠标事件，即容器内的对象可以正常地触发事件和取消冒泡。
而对于容器外的鼠标事件无论参数是什么都会被捕获，可以用下面这个简单的例子测试一下（ie）：
Code

mouseover

点击div的背景会触发不了事件（点击边框或div里面的对象是可以触发的）。
到底什么时候会出现这个bug呢，再用下面的代码测试：
Code

测试代码中我把背景颜色（包括body）设成灰色，首先可以看出在蓝色div（测试对象）内只要触发点是在灰色上面，就能触发事件；相反，在其他不是背景的地方，即使是边框、图片，也不能触发事件。
就像是把灰色的背景的补到蓝色div上来，而且仅仅是背景能这样，多奇怪的设定啊。
这里要说明的是body比较特别，不管背景是不是透明，只要触发点是直接在body上就能触发事件。
我的结论是如果触发事件的对象背景是透明的，而事件的触发点不在对象内的元素上，也不是直接在body上，而且透明背景外没有非透明背景的话，那么事件触发就会失败。
这个结论写得不太好，因为我都不知改怎么表达这奇怪的设定，希望各位能明白。
ps：这里设置图片背景跟颜色背景效果是一样的。
那最好解决的方法就是给对象设一个非透明背景，但有时需求正好是要透明的，那怎么办呢？
首先想到的是加上背景色后设置完全透明，但这样连边框，容器内的对象等都完全透明了，不够好。
如果能保证触发点直接在body或非背景上也可以，如果这个也不能保证呢？
我想到的一个解决方法是在容器里面加一个层，覆盖整个容器，并设置背景色和完全透明：
Code
with(this._Handle.appendChild(document.createElement("div")).style){
width = height = "100%"; backgroundColor = "#fff"; filter = "alpha(opacity:0)";
}
到这里又不得不说ie6的一个渲染bug，用下面的代码测试（ie6）：
Code

复制代码代码如下:

var isIE = (document.all) ? true : false; 
var $ = function (id) { 
return "string" == typeof id ? document.getElementById(id) : id; 
}; 
var Class = { 
create: function() { 
return function() { this.initialize.apply(this, arguments); } 
} 
} 
var Extend = function(destination, source) { 
for (var property in source) { 
destination[property] = source[property]; 
} 
} 
var Bind = function(object, fun) { 
return function() { 
return fun.apply(object, arguments); 
} 
} 
var BindAsEventListener = function(object, fun) { 
return function(event) { 
return fun.call(object, (event || window.event)); 
} 
} 
var CurrentStyle = function(element){ 
return element.currentStyle || document.defaultView.getComputedStyle(element, null); 
} 
function addEventHandler(oTarget, sEventType, fnHandler) { 
if (oTarget.addEventListener) { 
oTarget.addEventListener(sEventType, fnHandler, false); 
} else if (oTarget.attachEvent) { 
oTarget.attachEvent("on" + sEventType, fnHandler); 
} else { 
oTarget["on" + sEventType] = fnHandler; 
} 
}; 
function removeEventHandler(oTarget, sEventType, fnHandler) { 
if (oTarget.removeEventListener) { 
oTarget.removeEventListener(sEventType, fnHandler, false); 
} else if (oTarget.detachEvent) { 
oTarget.detachEvent("on" + sEventType, fnHandler); 
} else { 
oTarget["on" + sEventType] = null; 
} 
}; 
//拖放程序 
var Drag = Class.create(); 
Drag.prototype = { 
//拖放对象 
initialize: function(drag, options) { 
this.Drag = $(drag);//拖放对象 
this._x = this._y = 0;//记录鼠标相对拖放对象的位置 
this._marginLeft = this._marginTop = 0;//记录margin 
//事件对象(用于绑定移除事件) 
this._fM = BindAsEventListener(this, this.Move); 
this._fS = Bind(this, this.Stop); 
this.SetOptions(options); 
this.Limit = !!this.options.Limit; 
this.mxLeft = parseInt(this.options.mxLeft); 
this.mxRight = parseInt(this.options.mxRight); 
this.mxTop = parseInt(this.options.mxTop); 
this.mxBottom = parseInt(this.options.mxBottom); 
this.LockX = !!this.options.LockX; 
this.LockY = !!this.options.LockY; 
this.Lock = !!this.options.Lock; 
this.onStart = this.options.onStart; 
this.onMove = this.options.onMove; 
this.onStop = this.options.onStop; 
this._Handle = $(this.options.Handle) || this.Drag; 
this._mxContainer = $(this.options.mxContainer) || null; 
this.Drag.style.position = "absolute"; 
//透明 
if(isIE && !!this.options.Transparent){ 
//填充拖放对象 
with(this._Handle.appendChild(document.createElement("div")).style){ 
width = height = "100%"; backgroundColor = "#fff"; filter = "alpha(opacity:0)"; 
} 
} 
//修正范围 
this.Repair(); 
addEventHandler(this._Handle, "mousedown", BindAsEventListener(this, this.Start)); 
}, 
//设置默认属性 
SetOptions: function(options) { 
this.options = {//默认值 
Handle: "",//设置触发对象（不设置则使用拖放对象） 
Limit: false,//是否设置范围限制(为true时下面参数有用,可以是负数) 
mxLeft: 0,//左边限制 
mxRight: 9999,//右边限制 
mxTop: 0,//上边限制 
mxBottom: 9999,//下边限制 
mxContainer: "",//指定限制在容器内 
LockX: false,//是否锁定水平方向拖放 
LockY: false,//是否锁定垂直方向拖放 
Lock: false,//是否锁定 
Transparent: false,//是否透明 
onStart: function(){},//开始移动时执行 
onMove: function(){},//移动时执行 
onStop: function(){}//结束移动时执行 
}; 
Extend(this.options, options || {}); 
}, 
//准备拖动 
Start: function(oEvent) { 
if(this.Lock){ return; } 
this.Repair(); 
//记录鼠标相对拖放对象的位置 
this._x = oEvent.clientX - this.Drag.offsetLeft; 
this._y = oEvent.clientY - this.Drag.offsetTop; 
//记录margin 
this._marginLeft = parseInt(CurrentStyle(this.Drag).marginLeft) || 0; 
this._marginTop = parseInt(CurrentStyle(this.Drag).marginTop) || 0; 
//mousemove时移动 mouseup时停止 
addEventHandler(document, "mousemove", this._fM); 
addEventHandler(document, "mouseup", this._fS); 
if(isIE){ 
//焦点丢失 
addEventHandler(this._Handle, "losecapture", this._fS); 
//设置鼠标捕获 
this._Handle.setCapture(); 
}else{ 
//焦点丢失 
addEventHandler(window, "blur", this._fS); 
//阻止默认动作 
oEvent.preventDefault(); 
}; 
//附加程序 
this.onStart(); 
}, 
//修正范围 
Repair: function() { 
if(this.Limit){ 
//修正错误范围参数 
this.mxRight = Math.max(this.mxRight, this.mxLeft + this.Drag.offsetWidth); 
this.mxBottom = Math.max(this.mxBottom, this.mxTop + this.Drag.offsetHeight); 
//如果有容器必须设置position为relative来相对定位，并在获取offset之前设置 
!this._mxContainer || CurrentStyle(this._mxContainer).position == "relative" || (this._mxContainer.style.position = "relative"); 
} 
}, 
//拖动 
Move: function(oEvent) { 
//判断是否锁定 
if(this.Lock){ this.Stop(); return; }; 
//清除选择 
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); 
//设置移动参数 
var iLeft = oEvent.clientX - this._x, iTop = oEvent.clientY - this._y; 
//设置范围限制 
if(this.Limit){ 
//设置范围参数 
var mxLeft = this.mxLeft, mxRight = this.mxRight, mxTop = this.mxTop, mxBottom = this.mxBottom; 
//如果设置了容器，再修正范围参数 
if(!!this._mxContainer){ 
mxLeft = Math.max(mxLeft, 0); 
mxTop = Math.max(mxTop, 0); 
mxRight = Math.min(mxRight, this._mxContainer.clientWidth); 
mxBottom = Math.min(mxBottom, this._mxContainer.clientHeight); 
}; 
//修正移动参数 
iLeft = Math.max(Math.min(iLeft, mxRight - this.Drag.offsetWidth), mxLeft); 
iTop = Math.max(Math.min(iTop, mxBottom - this.Drag.offsetHeight), mxTop); 
} 
//设置位置，并修正margin 
if(!this.LockX){ this.Drag.style.left = iLeft - this._marginLeft + "px"; } 
if(!this.LockY){ this.Drag.style.top = iTop - this._marginTop + "px"; } 
//附加程序 
this.onMove(); 
}, 
//停止拖动 
Stop: function() { 
//移除事件 
removeEventHandler(document, "mousemove", this._fM); 
removeEventHandler(document, "mouseup", this._fS); 
if(isIE){ 
removeEventHandler(this._Handle, "losecapture", this._fS); 
this._Handle.releaseCapture(); 
}else{ 
removeEventHandler(window, "blur", this._fS); 
}; 
//附加程序 
this.onStop(); 
} 
};

测试代码：
Code

复制代码代码如下:

拖放状态：未开始
<script> <BR>var drag = new Drag("idDrag", { mxContainer: "idContainer", Handle: "idHandle", Limit: true, <BR>onStart: function(){ $("idShow").innerHTML = "开始拖放"; }, <BR>onMove: function(){ $("idShow").innerHTML = "left："+this.Drag.offsetLeft+"；top:"+this.Drag.offsetTop; }, <BR>onStop: function(){ $("idShow").innerHTML = "结束拖放"; } <BR>}); <BR>$("idReset").onclick = function(){ <BR>drag.Limit = true; <BR>drag.mxLeft = drag.mxTop = 0; <BR>drag.mxRight = drag.mxBottom = 9999; <BR>drag.LockX = drag.LockY = drag.Lock = false; <BR>} <BR>$("idLock").onclick = function(){ drag.Lock = true; } <BR>$("idLockX").onclick = function(){ drag.LockX = true; } <BR>$("idLockY").onclick = function(){ drag.LockY = true; } <BR>$("idLimit").onclick = function(){ drag.mxRight = drag.mxBottom = 200;drag.Limit = true; } <BR>$("idLimitOff").onclick = function(){ drag.Limit = false; } <BR></script>