JavaScript可拖动DIV

 

< 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 > &nbsp;&nbsp;
     < a  href ="javascript:void(null);"  onclick ="choose('南京');" > 南京 </ a > &nbsp;&nbsp;
</ 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 >