更新（2008-04-09）：以前的版本中存在拖动模块中的内容不可选的问题，原因为函数FocusIt和MoveIt中判断事件对象不是目标对象后用了return false。
拖拽的实现其实挺简单的，这里的简单是实现原理的简单，利用鼠标事件：
mousedown锁定目标，
mousemove移动，
mouseup退出移动，设置
全局变量为开关。（可以设置Cookie存取上一次的位置坐标）
判断是否存在可用的
Cookie，如有，读取上一次的数据并定位。
锁定目标对象是关键，判断点击部位是否是可以拖拽的部位，如果是设置移动对象的position，及其left和top（也就是相对于网页的坐标，offsetLeft和offsetTop），打开可以移动的开关。
移动对象，让移动对象相对于屏幕原点的坐标系，随着鼠标位置的变化而移动（clientX 和clientY ）。
退出移动，关闭可以移动的开关，存储坐标位置的Cookie。
JavaScript
<script language="JavaScript" type="text/javascript">
<!--
window.onload = function(){
drag("box","t");
}
function drag(el,bar){//el为要移动的对象的id，bar为可拖拽部位的class
var box=document.getElementById(el); //获得拖拽对象
var t=bar;//定义className为t的部位才可拖拽
var ie=!!(window.attachEvent && !window.opera);//判断是否IE
var par=false; // 拖拽对象是否可以移动的开关
var elx, ely; // 拖拽对象在页面上的坐标
var x,y; // 拖拽对象在屏幕上的坐标
//页面载入时 ，如果有Cookie 读取 并设置初始位置
var cleft = GetCookie("cleft");
var ctop = GetCookie("ctop");
if(cleft&&ctop){
box.style.position = "absolute";
box.style.left = cleft;
box.style.top = ctop;
}
box.onmousedown = FocusIt; //拖拽前预处理
document.onmousemove = MoveIt; //拖拽
document.onmouseup = ClearIt; //清除拖拽
function FocusIt(e){
var target = ie ? event.srcElement : e.target;
if(target.className==t){
par = true;//打开开关
box.style.position = "absolute";//让对象绝对定位，可以在屏幕上任意位置出现
box.style.left = box.offsetLeft+"px";//获得拖拽对象的当前页面坐标（最后加的px为了兼容ff）
box.style.top = box.offsetTop+"px";
x= ie ? event.clientX : e.clientX;//获得鼠标的当前页面坐标
y= ie ? event.clientY : e.clientY;
elx = parseInt(box.style.left);//获得拖拽对象的当前页面坐标，并转换为数字，用于后面的计算
ely = parseInt(box.style.top);
}
}
function MoveIt(e){
if (par){
box.style.left = ie ? event.clientX + (elx - x) + "px" : e.clientX + (elx - x) + "px";
box.style.top = ie ? event.clientY + (ely - y) + "px" : e.clientY + (ely - y) + "px";//让拖拽对象在页面的坐标相对于鼠标的坐标移动
}
}
function ClearIt(){
par = false;//关闭开关
SetCookie("cleft",box.style.left);//保存当前位置
SetCookie("ctop",box.style.top);
}
//Cookie
function SetCookie(sName, sValue){
document.cookie = sName + "=" + escape(sValue) + "; ";
}
function GetCookie(sName){
var aCookie = document.cookie.split("; ");
for (var i=0; i < aCookie.length; i++){
var aCrumb = aCookie[i].split("=");
if (sName == aCrumb[0])
return unescape(aCrumb[1]);
}
}
}
//-->
</script>
CSS
<style type="text/css" media="screen">
<!--
#box{width: 250px;height:200px;border:1px solid #ccc;background: #fff;}
#box .t{height:20px;margin:0;padding:2px 4px;border-bottom:1px dashed #ddd;background: #f8f8f8;cursor: move;font:12px;color:#f83;}
#box .t:hover{background: #eee;border-bottom:1px dashed #fc0;}
-->
</style>
Html
<div id="box">
<h3 class="t">title and drag Bar</h3>
<div class="ct">content</div>
</div>
