IE/FireFox具备兼容性的拖动代码

时间:2021-05-28

特点:
1、兼容IE6、FF、Opear(IE7还没有机会测试)
2、拖动流畅
3、起点与终点之间有过渡,使移动更平滑(可调)

演示

/*
Author:misshjn
HomePage:http://putedStyle(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;
};
}


声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章