特点:
1、兼容 ie6、ff、opear(ie7还没有机会测试)
2、拖动流畅
3、起点与终点之间有过渡,使移动更平滑(可调)
演示
/*
author:misshjn
homepage:http://www.happyshow.org
date:2007-04-30
拖动开始
*/
function _getstyle(element,styleprop){
if (element.currentstyle){
var y = element.currentstyle[styleprop];
}else if (window.getcomputedstyle){
var y = document.defaultview.getcomputedstyle(element,null).getpropertyvalue(styleprop.replace(/([a-z])/g,-$1).tolowercase());
}
return y;
}
function _elementonmousedown(evt,blockid){
var obj, temp;
obj=document.getelementbyid(blockid);
var x = evt.clientx || evt.pagex;
var y = evt.clienty || evt.pagey;
obj.startx=x-obj.offsetleft;
obj.starty=y-obj.offsettop;
var d = document.createelement(div);
d.style.position = absolute;
d.style.width = obj.clientwidth + parseint(_getstyle(obj,borderleftwidth),10) + parseint(_getstyle(obj,borderrightwidth)) -2 + px;
d.style.height = obj.clientheight + parseint(_getstyle(obj,bordertopwidth),10) + parseint(_getstyle(obj,borderbottomwidth)) -2 + px;
d.style.border = 1px dashed #666;
d.style.top = _getstyle(obj,top);
d.style.left = _getstyle(obj,left);
d.style.zindex = 9999;
document.body.appendchild(d);
document.onmousemove=function(evt){
d.style.left= (evt?evt.pagex:event.clientx) - obj.startx + px;
d.style.top= (evt?evt.pagey:event.clienty) - obj.starty + px;
};
document.onmouseup=function(){
var objl = parseint(_getstyle(obj,left),10);
var objt = parseint(_getstyle(obj,top),10);
var obj2l = parseint(d.style.left,10);
var obj2t = parseint(d.style.top,10);
var todolist = [];
var level = 10; //元素移动从起点到终点之间过渡的级数,大于0的整数
var speed = 10; //毫秒,每次移动的间隔时间,数字越大,动画感越强,但跳跃感也越大
for (i=1; i todolist.push(function(t){
settimeout(function(){
obj.style.left = objl + (obj2l-objl)*(t/level) + px;
obj.style.top = objt + (obj2t-objt)*(t/level) + px;
if(t==i)todolist=null;
},speed*arguments[0]);
});
}
for (i=1; i todolist[i-1](i);
}
document.body.removechild(d);
document.onmousemove = null;
document.onmouseup = null;
};
}
/*
拖动结束
*/