请教,javascript的拖动div代码

[size=small] 这个是51job上的实例:[url]http://www.51job.com/default-area.php?area=0100[/url]
当点选"选择/修改"时,会弹出对话框来让你选择,这个对话框是可以拖动的,现在我有个类似的代码来实现拖动:
[code="java"] var oDrag = "";
var ox,oy,nx,ny,dy,dx;

        function drag(e,o){
            var e = e ? e : event;
            var mouseD = document.all ? 1 : 0;
            if(e.button == mouseD){
                oDrag = o.parentNode;
                //alert(oDrag.id);
                ox = e.clientX;
                oy = e.clientY;  
            }
        }

        document.onmouseup = function(){oDrag = "";}
        document.onmousemove = function(event){dragPro(event);}

        function dragPro(e){
            if(oDrag != ""){ 
                var e = e ? e : event;
                //$(oDrag).style.left = $(oDrag).offsetLeft + "px";
                //$(oDrag).style.top = $(oDrag).offsetTop + "px";
                dx = parseInt($(oDrag).style.left);
                dy = parseInt($(oDrag).style.top);
                //dx = $(oDrag).offsetLeft;
                //dy = $(oDrag).offsetTop;
                nx = e.clientX;
                ny = e.clientY;
                $(oDrag).style.left = (dx + ( nx - ox )) + "px";
                $(oDrag).style.top = (dy + ( ny - oy )) + "px";
                ox = nx;
                oy = ny;
            }
        }[/code]

但是我看不懂,希望会的朋友,给我解释下,最好给我加上详细的注释.
下面是页面调用的div:
[code="java"]

[/code]
谢啦!
[/size]
[b]问题补充：[/b]
老报错吗?我没有把全部代码贴出来:




仿51job.com城市选择框特效
<br> &lt;!--<br> body{padding-top:50px;font-size:12px;}<br> h2{margin:0px;padding:0px;font-size:12px;font-weight:bold;}<br> .bton{border:1px solid #CCC;background:#DDD;}<br> .cont{padding:10px;}<br> #main{width:400px;margin:0px auto;}<br> #selectItem{background:#FFF;position:absolute;top:0px;left:center;border:1px solid #000;overflow:hidden;margin-top:10px;width:400px;z-index:2;}<br> #preview{margin:1px;border:1px solid #CCC;}<br> #result{border:1px solid #CCC;margin-top:10px;}<br> .tit{line-height:20px;height:20px;margin:1px;padding-left:10px;}<br> .bgc_ccc{background:#CCC;}<br> .bgc_eee{background:#eee;}<br> .c_999{color:#999}<br> .pointer{cursor:pointer;}<br> .left{float:left;}<br> .right{float:right;}<br> .cls{clear:both;font-size:0px;height:0px;overflow:hidden;}<br> #bg{background:#CCC;filter:alpha(opacity=70);opacity:0.7;width:100%;;position:absolute;left:0px;top:0px;display:none;z-index:1;}<br> .hidden{display:none;}<br> .move{cursor:move;}<br> --&gt;<br>
<body>
    <div id="main">
        <input name="button" type="button" class="bton pointer" value="请选择" onclick="openBg(1);openSelect(1)" />
        <div id="result">
            <div class="tit bgc_eee">
                <h2>您已选择的城市汇总</h2>
            </div>
            <div class="cont" id="makeSureItem"></div>
        </div>
    </div>

    <div id="bg"></div>

    <div id="selectItem" class="hidden">
        <div class="tit bgc_ccc move" onmousedown="drag(event,this)">
            <h2 class="left">请选择城市</h2>
            <span class="pointer right" onclick="openBg(0);openSelect(0);">[取消]</span>
            <span class="pointer right" onclick="makeSure();">[确定]</span>
        </div>
        <div class="cls"></div>
        <div class="cont">
            <div id="selectSub">
                <select name="" onchange="showSelect(this.value)" style="margin-bottom:10px;">
                    <option value="0">第0层</option>
                    <option value="1">第1层</option>
                    <option value="2">第2层</option>
                    <option value="3">第3层</option>
                </select>
                <div id="c00">
                    <input type="checkbox" name="ck00" onclick="addPreItem()" value="北京" />北京 
                    <input type="checkbox" name="ck00" onclick="addPreItem()" value="福建" />福建 
                    <input type="checkbox" name="ck00" onclick="addPreItem()" value="四川" />四川 
                    <input type="checkbox" name="ck00" onclick="addPreItem()" value="江苏" />江苏
                </div>
                <div id="c01">
                    <input type="checkbox" name="ck01" onclick="addPreItem()" value="上海" />上海 
                    <input type="checkbox" name="ck01" onclick="addPreItem()" value="云南" />云南 
                    <input type="checkbox" name="ck01" onclick="addPreItem()" value="贵州" />贵州
                </div>
                <div id="c02">
                    <input type="checkbox" name="ck01" onclick="addPreItem()" value="黑龙江" />黑龙江 
                    <input type="checkbox" name="ck01" onclick="addPreItem()" value="吉林" />吉林 
                    <input type="checkbox" name="ck01" onclick="addPreItem()" value="辽宁" />辽宁
                </div>
                <div id="c03">
                    <input type="checkbox" name="ck01" onclick="addPreItem()" value="美国" />美国 
                    <input type="checkbox" name="ck01" onclick="addPreItem()" value="阿富汗" />阿富汗 
                    <input type="checkbox" name="ck01" onclick="addPreItem()" value="日本" />日本
                </div>
            </div>
        </div>

        <div id="preview">
            <div class="tit bgc_eee c_999">
                <h2>您已选择的城市</h2>
            </div>
            <div class="cont" id="previewItem"></div>
        </div>
    </div>

    <script type="text/javascript">
        /* ------使用说明----- */
        /*
            添加城市方法：
            添加组：找到id 是 "selectSub"中select标签下，添加option标签 value属性递增，找到 id 是 "selectSub",按照原有格式添加div,其id属性递增
            添加二级傅选矿选项
            复制 id 是 "selectSub" 下任意input标签，粘贴在需要添加的位置。
        */
        var grow = $("selectSub").getElementsByTagName("option").length; //组数
        var showGrow = 0;//已打开组
        var selectCount = 0; //已选数量 
        showSelect(showGrow);
        var items = $("selectSub").getElementsByTagName("input");

        //alert(maxItem);
        //var lenMax = 2; 
        //alert(1);

        function $(o){ //获取对象
            if(typeof(o) == "string")
                return document.getElementById(o);
            return o;
        }

        function openBg(state){ //遮照打开关闭控制
            if(state == 1){
                document.getElementById("bg").style.display = "block";
                var h = document.body.offsetHeight > document.documentElement.offsetHeight ? document.body.offsetHeight : document.documentElement.offsetHeight;
                //alert(document.body.offsetHeight);
                //alert(document.documentElement.offsetHeight);
                document.getElementById("bg").style.height = h + "px";
            }
            else{
                document.getElementById("bg").style.display = "none";
            } 
        }

        function openSelect(state){ //选择城市层关闭打开控制
            if(state == 1){
                $("selectItem").style.display = "block";
                $("selectItem").style.left = ($("bg").offsetWidth - $("selectItem").offsetWidth)/2 + "px";
                $("selectItem").style.top = document.body.scrollTop + 100 + "px";  
            }
            else{
                $("selectItem").style.display = "none";
            }
        }

        function showSelect(id){
            for(var i = 0 ; i < grow ;i++){
                $("c0" + i).style.display = "none";
            }
            $("c0" + id).style.display = "block";
            showGrow = id;
        }

        function open(id,state){ //显示隐藏控制
            if(state == 1)
            $(id).style.display = "block";
            $(id).style.diaplay = "none";
        }

        function addPreItem(){ 
            $("previewItem").innerHTML = "";
            var len　= 0 ;
            for(var i = 0 ; i < items.length ; i++){
                if(items[i].checked == true){
                    //len++;
                    //if(len > lenMax)
                    //{
                    // alert("不能超过" + lenMax +"个选项！")
                    // return false;
                    //}
                var mes = "<input type='checkbox' checked='true' value='"+ items[i].value +"' onclick='copyItem(\"previewItem\",\"previewItem\");same(this);'>" + items[i].value;
                $("previewItem").innerHTML += mes;
                    //alert(items[i].value);
                }
            }
        }

        function makeSure(){
            //alert(1);
            //$("makeSureItem").innerHTML = $("previewItem").innerHTML;
            openBg(0);
            openSelect(0);
            copyItem("previewItem","makeSureItem") 
        }

        function copyHTML(id1,id2){
            $(id2).innerHTML = $("id1").innerHTML;
        }

        function copyItem(id1,id2){
            var mes = "";
            var items2 = $(id1).getElementsByTagName("input");
            for(var i = 0 ; i < items2.length ; i++){
                if(items2[i].checked == true){
                    mes += "<input type='checkbox' checked='true' value='"+ items2[i].value +"' onclick='copyItem(\"" + id2+ "\",\""+ id1 +"\");same(this);'>" + items2[i].value;   
                }
            }
            $(id2).innerHTML = "";
            $(id2).innerHTML += mes;
            //alert($(id2).innerHTML);
        }

        function same(ck){
            for(var i = 0 ; i < items.length ; i++){
                if(ck.value == items[i].value){
                    items[i].checked = ck.checked;
                }
            }
        } 

        /* 鼠标拖动 */
        var oDrag = "";
        var ox,oy,nx,ny,dy,dx;

        function drag(e,o){
            var e = e ? e : event;
            var mouseD = document.all ? 1 : 0;
            if(e.button == mouseD){
                oDrag = o.parentNode;
                //alert(oDrag.id);
                ox = e.clientX;
                oy = e.clientY;  
            }
        }

        document.onmouseup = function(){oDrag = "";}
        document.onmousemove = function(event){dragPro(event);}

        function dragPro(e){
            if(oDrag != ""){ 
                var e = e ? e : event;
                //$(oDrag).style.left = $(oDrag).offsetLeft + "px";
                //$(oDrag).style.top = $(oDrag).offsetTop + "px";
                dx = parseInt($(oDrag).style.left);
                dy = parseInt($(oDrag).style.top);
                //dx = $(oDrag).offsetLeft;
                //dy = $(oDrag).offsetTop;
                nx = e.clientX;
                ny = e.clientY;
                $(oDrag).style.left = (dx + ( nx - ox )) + "px";
                $(oDrag).style.top = (dy + ( ny - oy )) + "px";
                ox = nx;
                oy = ny;
            }
        }
    </script>
</body>

楼主那个用起来不停的报错，改代码改得烦躁。
所以根据楼主的要求，自己又写了一份拖动的javascript代码。希望有助于楼主理解拖动的操作（IE only）：
[code="js"] /* 在id为dragId的元素上执行拖动操作时，改变id为moveId的元素的位置。 */ function RegDrag(dragId,moveId){ var drag=document.getElementById(dragId);//拖动的目标，即鼠标按下时的区域。 var target=document.getElementById(moveId);//移动的目标，即拖动时移动的区域。 target.style.position="absolute";//position属性设置为absulute才可正常移动。 var canMove=false;//是否处于可以拖动的状态。 var mouseDownX=0,mouseDownY=0;//记录鼠标按下时位置。 var mouseDownLeft=0,mouseDownY=0;//记录鼠标按下时移动目标的位置。 <pre><code>var DragConfig={};//创建一个对象用来管理事件。 DragConfig.startMove=function(){ drag.setCapture();//使得drag可以捕获全屏幕内的所有事件。 /*记录鼠标按下时的状态。*/ mouseDownX=event.screenX; mouseDownY=event.screenY; mouseDownLeft=target.offsetLeft; mouseDownTop=target.offsetTop; canMove=true;//是否可以移动标识为true，使doMove方法有效。 } DragConfig.doMove=function(){ if(canMove){/*如果可以移动，则改变target的位置。*/ target.style.left=mouseDownLeft+(event.screenX-mouseDownX); target.style.top=mouseDownTop+(event.screenY-mouseDownY); } } DragConfig.endMove=function(){ drag.releaseCapture();//释放drag的事件捕获。 canMove=false;//是束可以移动标识为false,doMove方法无效。 } drag.onmousedown=DragConfig.startMove;//将startMove方法绑定到onmousedown drag.onmousemove=DragConfig.doMove;//将doMove方法绑定到onmousemove drag.onmouseup=DragConfig.endMove;//将endMove方法绑定到onmouseup </code></pre> } window.onload=function(){//窗体加载成功后执行的操作。 RegDrag("drag","drag");//注册拖动。 }

[/code]

楼主真是...我上面的代码就已经说明了实现拖动效果是怎么样的过程，只有部分的细微实现稍有不同。只要理解了我上面所写的，自然就能够理解楼主自己所发的那段代码了。楼主怎么就不明白我的良苦用心呢？上面的代码白写了……

又要再注释一遍，郁闷。
[code="js"]
var oDrag = "";//当前正在移动的对象。
var ox,oy,nx,ny,dy,dx;//标识位置所用的变量。
/*
e为传递过来的event对象，为兼容Firefox而准备。
o为实现拖动操作的div对象(鼠标按下拖动的对象，而不是移动的对象)。
*/
function drag(e,o){
var e = e ? e : event;
var mouseD = document.all ? 1 : 0;//判断按下的是哪个鼠标键，同样为兼容IE和火狐而准备。
if(e.button == mouseD){
oDrag = o.parentNode;//获取外层div，设置为移动对象。
//alert(oDrag.id);
ox = e.clientX;//记录鼠标按下时的相对于屏幕左边的距离。
oy = e.clientY;//记录鼠标按下时的相对于屏幕上边的距离。

/*1*/   dx = oDrag.offsetX//记录鼠标按下时oDrag的左边距。
/*2*/   dy = oDrag.offsetY//记录鼠标按下时oDrag的上边距。
}

}

document.onmouseup = function(){oDrag = "";}//鼠标放开时，设置移动对象为空。
document.onmousemove = function(event){dragPro(event);}

/*
e为传递过来的event对象，为兼容Firefox而准备。
楼主主要不理解的应该就是这个方法吧。
说实话，这个方法效率太低，每次执行都会进行多次赋值操作。而刚好这个事件正是onmousemove所调用的，所以执行次数会很多。那么相应的消耗的系统资源也就更大。
所以我把这个方法改掉了。相应的，在drag方法里面添加了1,2两行。这样，代码更简洁，效率也比之前的更高。
*/
function dragPro(e){
if(oDrag != ""){
var e = e ? e : event;
//在原始位置的数据上，加上鼠标移动时产生的偏移量。即为oDrag现在的位置。
oDrag.style.left = dx + (e.clientX - ox );
oDrag.style.top = dy + (e.clientY - oy );
}
}[/code]
其实楼主有心的话，应该会发现这个拖动的代码同我上面所写的代码几乎完全相同……只是在代码风格和兼容代码方面有一些不同。
所以麻烦楼主以后看回答的时候看仔细一点。不然浪费楼主自己的时间，也浪费我们这些回答问题的人的时间。还好本人晚上比较闲……

写错了，不好意思，嘿嘿。1，2处的代码应该是这样：
[code="js"]
/*1*/ dx = parseInt(oDrag.style.left);//记录鼠标按下时oDrag的左边距。
/*2*/ dy = parseInt(oDrag.style.top);//记录鼠标按下时oDrag的上边距。[/code]