js实现拖动的封装函数

function drag(obj,site,fn){
var dmW = document.documentElement.clientWidth || document.body.clientWidth
var dmH = document.documentElement.clientHeight || document.body.clientHeight
var site = site || {};
var adsorb = site.n || 0; //磁性吸附的吸附范围
var l = site.l || 0;
var r = (site.r || site.r==0)?site.r:dmW - obj.offsetWidth;
var t = site.t || 0;
var b = (site.b || site.b==0)?site.b:dmH - obj.offsetHeight;
obj.onmousedown=function(ev){
var oEvent = ev || event;
var siteX = oEvent.clientX-obj.offsetLeft;
var siteY = oEvent.clientY- obj.offsetTop;
if(obj.setCapture){ //兼容IE低版本的阻止默认行为,并实现事件捕获
obj.onmousemove=move;
obj.onmouseup=up;
obj.setCapture();
}else{
document.onmousemove=move;
document.onmouseup=up;
}
function move(ev){
var oEvent = ev || event;
var iLeft = oEvent.clientX - siteX;
var iTop = oEvent.clientY - siteY;
if(iLeft <=l+adsorb){ //限制拖动范围
iLeft=0;
}
if(iLeft >=r-adsorb){
iLeft= r;
}
if(iTop<=t+adsorb){
iTop =0;
}
if(iTop >=b-adsorb){
iTop = b;
}
if(fn){ //执行回调函数,如果有其他附加情况需要处理
fn({left:iLeft,top:iTop})
}else{
obj.style.left = iLeft + 'px';
obj.style.top = iTop + 'px';
}
}
function up(){
this.onmousemove=null;
this.onmouseup=null;
if(obj.setCapture){ //拖放结束后释放捕获
obj.releaseCapture();
}
}
return false;
}


}
posted on 2016-04-19 18:02  努力也会有春天  阅读(417)  评论(0编辑  收藏  举报