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){
vary=element.currentStyle[styleProp];
}elseif(window.getComputedStyle){
vary=document.defaultView.getComputedStyle(element,null).getPropertyValue(styleProp.replace(/([A-Z])/g,"-$1").toLowerCase());
}
returny;
}
function_elementOnmouseDown(evt,blockID){
varobj,temp;
obj=document.getElementById(blockID);
varx=evt.clientX||evt.pageX;
vary=evt.clientY||evt.pageY;
obj.startX=x-obj.offsetLeft;
obj.startY=y-obj.offsetTop;
vard=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="1pxdashed#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(){
varobjL=parseInt(_getStyle(obj,"left"),10);
varobjT=parseInt(_getStyle(obj,"top"),10);
varobj2L=parseInt(d.style.left,10);
varobj2T=parseInt(d.style.top,10);
vartodolist=[];
varlevel=10;//元素移动从起点到终点之间过渡的级数,大于0的整数
varspeed=10;//毫秒,每次移动的间隔时间,数字越大,动画感越强,但跳跃感也越大
for(i=1;i<=level;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<=level;i++){
todolist[i-1](i);
}
document.body.removeChild(d);
document.onmousemove=null;
document.onmouseup=null;
};
}
/*
拖动结束
*/