owen42087743
owen42087743
2008-07-30 09:52

请教,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 iteye_17163 13年前

    楼主那个用起来不停的报错,改代码改得烦躁。
    所以根据楼主的要求,自己又写了一份拖动的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]
    点赞 评论 复制链接分享
  • iteye_17163 iteye_17163 13年前

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

    点赞 评论 复制链接分享
  • iteye_17163 iteye_17163 13年前

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

    又要再注释一遍,郁闷。
    [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]
    其实楼主有心的话,应该会发现这个拖动的代码同我上面所写的代码几乎完全相同……只是在代码风格和兼容代码方面有一些不同。
    所以麻烦楼主以后看回答的时候看仔细一点。不然浪费楼主自己的时间,也浪费我们这些回答问题的人的时间。还好本人晚上比较闲……

    点赞 评论 复制链接分享

相关推荐