特点：

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;

};

}

/*

拖动结束

*/