原生js 简单拖拽

来源:互联网 发布:php留言板代码 编辑:程序博客网 时间:2024/06/18 02:34
var params={
left:0,
top:0,
currentX:0,
currentY:0,
flag:false
}
var getCss=function(o,key){
return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key];
}
var drag=function(bar,target,callback){
params.left=getCss(target,"left");
params.top=getCss(target,"top");


bar.onmousedown=function(e){
var e=e||window.event;
params.flag=true;
params.currentX=e.clientX;
params.currentY=e.clientY;
e.stopPropagation();
}


document.onmousemove=function(e){
var e=e||window.event;
if(params.flag){
var nowX=e.clientX;
var nowY=e.clientY;
target.style.left=parseInt(params.left)+(nowX-params.currentX)+"px";
target.style.top=parseInt(params.top)+(nowY-params.currentY)+"px";
}
}


document.onmouseup=function(){
params.flag=false;
if(typeof callback == "function"){

if(callback(parseInt(target.style.left),parseInt(target.style.top))){
params.left=getCss(target,"left");
params.top=getCss(target,"top");
}else{
target.style.left=params.left;
target.style.top=params.top;
}
}

}


}
0 0