用js写一个可以拖拽的浮动窗口

你的名字 2022-08-21 11:49 207阅读 0赞

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>dom3.html</title>
    	
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        
        
        <script language="javascript" type="text/javascript">
        	var x =0;
        	var y = 0;
        	var x1 =0;
        	var y1 = 0;
        	var moveable = false;
        	var index = 20000;
        	
      		function down(obj,evt){
      			e = evt?evt:window.event;
      			//通过这个来判断是IE还是FF  浏览器的兼容性问题
     // 			if(!window.captureEvents()){
      				obj.setCapture();
     // 			}else{
     // 				window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
     // 			}
      			var win = obj.parentNode;//取得父窗口
      			x = e.clientX;//取得当前坐标的X坐标
      			y = e.clientY;//取得当前坐标的Y坐标
      			x1 = parseInt(win.style.left.substr(0,win.style.left.length-2));//将父窗体距离浏览器左边界的距离转换为number
      			y1 = parseInt(win.style.top.substr(0,win.style.top.length-2));//将父窗体距离浏览器左边界的距离转换为number
      			moveable= true;
      			
      		}
      		
      		function move(obj, evt){
      			e = evt?evt:window.event;
      			if(moveable){
      				var win = obj.parentNode;
      				win.style.left = x1 + e.clientX - x +"px";
      				win.style.top = y1 + e.clientY -y +"px";
      				
      			}
      		}
      		//停止拖动
      		function up(obj){
     // 			if(!window.captureEvents()){
      				obj.releaseCapture();
     // 			}else{
     // 				window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);
     // 			}
      			moveable= false;
      		}
        </script>
    
      </head>
      
      <body >
    	<div style="width:400px;height:400px;top:100px;left:100px;background-color:red;position:absolute;">
    		<div οnmοusedοwn="down(this,event)" οnmοusemοve="move(this,event)" οnmοuseup="up(this)"
    		style="width:400px;height:100px;top:0px;left:0px;background-color:blue;position:absolute;font-size:30px;cursor:default">
    		浮动窗口
    		</div>
    	</div>
      </body>
    </html>