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

来源：互联网发布：mac俄罗斯红色号编辑：程序博客网时间：2024/06/02 21:45
<!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 onmousedown="down(this,event)" onmousemove="move(this,event)" onmouseup="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>
0 0