更新（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>