JavaScript可拖动DIV

最新推荐文章于 2024-10-10 10:50:43 发布

流浪狗

最新推荐文章于 2024-10-10 10:50:43 发布

阅读量541

点赞数

分类专栏： JavaScript 文章标签： javascript null class div ie

JavaScript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

 
 <style>
.fugai{
    position:absolute;
    z-index:100;
    left:0px;
    top:0px;
    filter:alpha(opacity=10);/*IE兼容*/
    opacity:0.1;/*FF兼容*/
    -moz-opacity:0.1;
    background-color:red;
}
.choose{
    position:absolute;
    z-index:101;
    width:300px;
    height:70px;
    background-color:blue;
}
.move{
    width:300px;
    height:20px;
    cursor:hand;
    background-color:green;
    border:solid black;
}
</style>
<body>
<a href="javascript:void(null);" onclick="show();" id="address">选择地点</a>
<div id="fugai" class="fugai" style="display:none;">
</div>
<div id="ch" style="display:none;left:50px;top:20px;" class="choose">
    <div class="move" onmousedown="move(this.parentNode,event);";>拖动我</div><br>
    <a href="javascript:void(null);" onclick="choose('北京');">北京</a>  
    <a href="javascript:void(null);" onclick="choose('南京');">南京</a>  
</div>
</body>
<script>
    function show(){
        document.getElementById("fugai").style.display="block";
        document.getElementById("fugai").style.width=document.body.clientWidth;
        document.getElementById("fugai").style.height=document.body.clientHeight;
        document.getElementById("ch").style.display="";
        document.getElementById("ch").style.left="50px";
        document.getElementById("ch").style.top="20px";
    }
    function choose(value){
        document.getElementById("fugai").style.display="none";
        document.getElementById("ch").style.display="none";
        document.getElementById("address").firstChild.data=value;
    }
    function move(element,event){
        var x=parseInt(element.style.left);
        var y=parseInt(element.style.top);
        var maxLeft=parseInt(document.body.clientWidth)-parseInt(element.clientWidth);
        var maxTop=parseInt(document.body.clientHeight)-parseInt(element.clientHeight);
        var deltaX=event.clientX-x;
        var deltaY=event.clientY-y;
        //添加临时事件
        if(document.addEventListener){//2级DOM
            document.addEventListener("mousemove",moveHandler,true);
            document.addEventListener("mouseup",upHandler,true);
        }else if(document.attachEvent){//IE5+
            document.attachEvent("onmousemove",moveHandler);
            document.attachEvent("onmouseup",upHandler);
        }else{//IE4
            var oldonmousemove=document.onmousemove;
            var oldonmouseup=document.onmouseup;
            document.onmousemove=moveHandler;
            document.onmouseup=upHandler;
        }
        //我们处理该事件,不让其他元素见到它
        if(event.preventDefault){//2级DOM
            event.preventDefault();
        }else{//IE
            event.returnValue=false;
        }
        //鼠标移动事件
        function moveHandler(e){
            if(!e){//IE
                e=window.event;
            }
            element.style.left=(e.clientX-deltaX)+"px";
            element.style.top=(e.clientY-deltaY)+"px";
            var left=parseInt(element.style.left);
            var top=parseInt(element.style.top);
            if(left<0){
                element.style.left="0px";
            }
            if(left>maxLeft){
                element.style.left=maxLeft+"px";
            }
            if(top<0){
                element.style.top="0px";
            }
            if(top>maxTop){
                element.style.top=maxTop+"px";
            }
            if(e.stopPropagation){//2级DOM
                e.stopPropagation();
            }else{//IE
                e.cancelBubble=true;
            }
        }
        //鼠标按键弹起
        function upHandler(e){
            if(!e){
                e=window.event;
            }
            if(document.removeEventListener){//2级DOM
                document.removeEventListener("mouseup",upHandler,true);
                document.removeEventListener("mousemove",moveHandler,true);
            }else if(document.detachEvent){//IE5+
                document.detachEvent("onmouseup",upHandler);
                document.detachEvent("onmousemove",moveHandler);
            }else{//IE4
                document.onmouseup=oldonmouseup;
                document.onmousemove=oldonmousemove;
            }
            if(e.stopPropagation){//2级DOM
                e.stopPropagation();
            }else{//IE
                e.cancelBubble=true;
            }
        }
    }
</script>
 