特點：
1、兼容 ie6、ff、opear（ie7還沒有機(jī)會測試）
2、拖動流暢
3、起點與終點之間有過渡，使移動更平滑(可調(diào))

演示

/*
author:misshjn
homepage:http://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; //元素移動從起點到終點之間過渡的級數(shù),大于0的整數(shù)
var speed = 10; //毫秒，每次移動的間隔時間，數(shù)字越大，動畫感越強(qiáng)，但跳躍感也越大
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;
};
}

/*
拖動結(jié)束
*/ 網(wǎng)友評論 [li] ann說： 天哪,昨天tianya.cn來我的博客訪問居然有120次~!!

原來我貼了百度空間圖片上去,沒有顯示,可能有些人找到屬性,直接到我博客欣賞了,嘻嘻,無心插柳柳成蔭.(2007-05-11 09:51:03)[/li] [li] mantou說： 拖動到窗口最邊緣的時候就會出錯了。。。(2007-05-26 17:27:37)[/li] [li] skyakira說： 增加一個
document.onselectstart=function(){
returnfalse;
}
可以防止拖動時選中文字；

結(jié)束的時候
document.onselectstart=null;(2007-06-11 13:46:16)[/li] [li] skyakira說： 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";

在頁面內(nèi)容很多的時候這兩句話錯誤；沒找到具體原因，而且頁面內(nèi)容多了，那個過度的效果基本看不出來；

還有就是經(jīng)常移動的div會粘到鼠標(biāo)上，單獨測試的時候沒任何問題；

引用這個之前引用了prototype.js'
mail:sky.zhao.crm[at]gmail.com(2007-06-11 13:58:45)[/li] [li] skyakira說： if($("linediv"))
{
document.body.removechild($("linediv"));
}
vard=document.createelement("div");
d.setattribute("id","linediv");
d.style.position="absolute";

增加了虛框存在的判斷，防止鼠標(biāo)滑出頁面以后，導(dǎo)致事件丟失，無法取消虛框的問題；(2007-06-11 17:18:04)[/li] [li] skyakira說： d.style.cursor="move";

繼續(xù)增加一個樣式，使鼠標(biāo)在虛框移動時保持移動狀態(tài)；
mail:sky.zhao.crm[at]gmail.com(2007-06-12 09:08:54)[/li] [li] 安靜說： happyshow 網(wǎng)頁改版啦~~恭喜一下快樂笛子~~一如繼往支持你哦,大哥.(2007-06-19 16:46:21)[/li] [code] [/code]