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

最新推荐文章于 2021-06-03 11:29:53 发布

CNZYYH

最新推荐文章于 2021-06-03 11:29:53 发布

阅读量2.1k

点赞数

分类专栏： Js 文章标签： javascript

本文链接：https://blog.csdn.net/CNZYYH/article/details/51281120

版权

Js 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

<!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">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <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>