< 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 >