JavaScript可拖动DIV

导读：
　　文章搜索：
　　
　　
　　
　　
　　
　　<style>.fugai{ position:absolute z-index:100 left:0px top:0px filter:alpha(opacity=10) <BR>　　background-color:red}.choose{ position:absolute z-index:101 width:300px height:70px background-color:blue}.move{ width:300px height:20px <BR>　　<IMG height=16 src="http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif" width=11> <BR>　　cursor:hand background-color:green border:solid black} <BR>　　<IMG height=16 src="http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif" width=11> <BR>　　</style>
　　
　　
　　
　　选择地点
　　
　　

　　
　　

　　
　　

拖动我

北京
　　
　　南京
　　
　　

　　
　　
　　
　　
　　
　　function show(){
　　document.getElementById("fugai").style.display="" 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.style.width);
　　var maxTop=parseInt(document.body.clientHeight)-parseInt(element.style.height);
　　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;
　　&n, bsp;} 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　　element.style.left="0px" } if(left>maxLeft){
　　element.style.left=maxLeft+"px" } if(top　　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 } } }
　　文章整理:DIY部落http://www.diybl.com(andyyoo)
　　如果图片或页面不能正常显示请　文章搜索：

本文转自
http://www.diybl.com/course/1_web/javascript/jsjs/20071031/81525.html