owen42087743 2008-07-30 09:52
浏览 255
已采纳

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

  • 写回答

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=&quot;absolute&quot;;//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(&quot;drag&quot;,&quot;drag&quot;);//注册拖动。<br> }<br>

    [/code]
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

悬赏问题

  • ¥15 微信小程序 用oss下载 aliyun-oss-sdk-6.18.0.min client报错
  • ¥15 ArcGIS批量裁剪
  • ¥15 labview程序设计
  • ¥15 为什么在配置Linux系统的时候执行脚本总是出现E: Failed to fetch http:L/cn.archive.ubuntu.com
  • ¥15 Cloudreve保存用户组存储空间大小时报错
  • ¥15 伪标签为什么不能作为弱监督语义分割的结果?
  • ¥15 编一个判断一个区间范围内的数字的个位数的立方和是否等于其本身的程序在输入第1组数据后卡住了(语言-c语言)
  • ¥15 Mac版Fiddler Everywhere4.0.1提示强制更新
  • ¥15 android 集成sentry上报时报错。
  • ¥15 抖音看过的视频,缓存在哪个文件