js实现简单拖拽效果

方法如下:

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 startDrag = function(bar, target, callback){
if(getCss(target, "left") !== "auto"){
params.left = getCss(target, "left");
}
if(getCss(target, "top") !== "auto"){
params.top = getCss(target, "top");
}
bar.onmousedown = function(event){
params.flag = true;
if(!event){
event = window.event;
bar.onselectstart = function(){
return false;
}
}
var e = event;
params.currentX = e.clientX;
params.currentY = e.clientY;
};
document.onmouseup = function(){
params.flag = false;
if(getCss(target, "left") !== "auto"){
params.left = getCss(target, "left");
}
if(getCss(target, "top") !== "auto"){
params.top = getCss(target, "top");
}
};
document.onmousemove = function(event){
var e = event ? event: window.event;
if(params.flag){
var nowX = e.clientX, nowY = e.clientY;
var disX = nowX - params.currentX, disY = nowY - params.currentY;
target.style.left = parseInt(params.left) + disX + "px";
target.style.top = parseInt(params.top) + disY + "px";
if (event.preventDefault) {
event.preventDefault();
}
return false;
}
if (typeof callback == "function") {
callback(parseInt(params.left) + disX, parseInt(params.top) + disY);
}
}
};

 使用方法为

     startDrag("触发拖拽的对象","被拖拽的对象")