请教,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>

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除结题
收藏举报

3条回答默认最新

关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
iteye_17163 2008-07-30 18:59
关注
楼主那个用起来不停的报错，改代码改得烦躁。
所以根据楼主的要求，自己又写了一份拖动的javascript代码。希望有助于楼主理解拖动的操作（IE only）：
[code="js"]<br> /*<br> 在id为dragId的元素上执行拖动操作时，改变id为moveId的元素的位置。<br> */<br> function RegDrag(dragId,moveId){<br> var drag=document.getElementById(dragId);//拖动的目标，即鼠标按下时的区域。<br> var target=document.getElementById(moveId);//移动的目标，即拖动时移动的区域。<br> target.style.position="absolute";//position属性设置为absulute才可正常移动。<br> var canMove=false;//是否处于可以拖动的状态。<br> var mouseDownX=0,mouseDownY=0;//记录鼠标按下时位置。<br> var mouseDownLeft=0,mouseDownY=0;//记录鼠标按下时移动目标的位置。</p> <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> <p>}<br> window.onload=function(){//窗体加载成功后执行的操作。<br> RegDrag("drag","drag");//注册拖动。<br> }<br>

[/code]

本回答被题主选为最佳回答 , 对您是否有帮助呢?

解决无用
评论打赏
分享
举报

评论

按下Enter换行，Ctrl+Enter发表内容

查看更多回答(2条)

报告相同问题？

关注问题

JavaScript基础,前端 javascript 前端
2022-09-25 11:23

回答 2 已采纳 display拼错了
javascript 插入一个 div javascript jquery
2018-09-15 02:33

回答 4 已采纳如果考虑子元素不仅仅全是em 的情况下 ``` var bb = document.createElement("div"); var aa = document.quer
JavaScript 前端调用后端接口异常问题 javascript json 前端
2022-07-16 09:07

回答 3 已采纳你看下你是不是缺少了必传参数。
拖拽生成树+JSON序列化
2022-12-14 23:17

CrazyDragon_King的博客复制下面代码，浏览器打开（Chrome、新版 Edge），打开控制台，拖拽形成树，然后控制台调用 Serializer() 方法。思考我刚开始做的时候，还不知道所有节点组成的是一个图（没有想到这里）。不过后来发现，这不就是...
js判断鼠标拖拽div div块位置错误 html javascript 前端
2023-02-08 15:10

回答 2 已采纳 css发一下
JavaScript在前端中作用大吗？ javascript 前端
2022-07-07 12:16

回答 5 已采纳你可以这么理解，Html是骨架，撑起整个页面Css是变现层，掌控这个页面的颜值，是否好看Js是用户行为动作，支撑页面的功能与用户之间的交互，实现与后端服务器交互，动态加载数据等等
一个前端问题请教一下 html javascript 前端
2022-04-19 18:07

回答 1 已采纳 getElementsByName 获取到的是个集合。insertAdjacentHTML是Element的方法。要用集合中元素调用insertAdjacentHTML方法，不能用集合直接调用
JavaScript(10) - 事件的分类和事件对象Event
2022-03-28 20:59

选项：C的博客 } </style> </head> <body> <div id="box"></div> <form action="#" id="form"> <input type="submit"> 提交</button> </form> <input type="text" id="input"> <script> //事件分为三类鼠标事件键盘事件 html...
求解答：javaScript代码中的return问题 javascript 前端
2022-03-06 18:52

回答 1 已采纳 return false; 是不再执行下面代码，直接结束。这段代码是在监听当前滚动条位置
js写拖拽div 只能实现拖拽一遍第二遍松开鼠标后还是会跟着鼠标走 javascript 前端
2022-04-21 17:26

回答 2 已采纳
怎样用JavaScript实现div盒子的切换 javascript
2016-04-07 05:19

回答 4 已采纳此题作废，我自己已经倒腾出来了，谢谢大家！
前端八股文
2023-10-08 16:37

wen_zhi的博客 // 'symbol' typeof null // 'object' typeof [] // 'object' typeof {} // 'object' typeof console // 'object' typeof console.log // 'function' 虽然 null为object，但这只是JavaScript 存在的一个悠久 ...
请教JavaScript里click自动执行问题 javascript 有问必答
2021-12-27 16:11

回答 2 已采纳需要安装浏览器插件，如油猴，可以编写js代码注入到博客的页面中实现自动填写提交油猴官网参考：https://www.tampermonkey.net/ 自己写chrome插件也行的：https://w
JavaScript笔记
2022-03-13 17:21

WhyNotZero_的博客 JavaScript笔记
JS——盒子的添加、闪烁与清空
2022-07-16 18:06

n南x星的博客 } style> head> <body> <div id="box1">div> <div id="box2"> ()">添加button> 闪烁button> 清空button> div> <script type="text/javascript"> // 设置随机颜色 function randcolor(a = 1) { // 生成0~255的随机...
没有解决我的问题, 去提问

悬赏问题

¥65 永磁型步进电机PID算法
¥15 sqlite 附加（attach database）加密数据库时，返回26是什么原因呢？
¥88 找成都本地经验丰富懂小程序开发的技术大咖
¥15 如何处理复杂数据表格的除法运算
¥15 如何用stc8h1k08的片子做485数据透传的功能？(关键词-串口)
¥15 有兄弟姐妹会用word插图功能制作类似citespace的图片吗？
¥200 uniapp长期运行卡死问题解决
¥15 latex怎么处理论文引理引用参考文献
¥15 请教：如何用postman调用本地虚拟机区块链接上的合约？
¥15 为什么使用javacv转封装rtsp为rtmp时出现如下问题：[h264 @ 000000004faf7500]no frame？

请教,javascript的拖动div代码

3条回答 默认 最新

悬赏问题

3条回答默认最新