js简单窗口拖动

最新推荐文章于 2023-11-28 11:58:47 发布

aodan5223

最新推荐文章于 2023-11-28 11:58:47 发布

阅读量319

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/jom-ch/archive/2007/04/16/2676081.html

版权

js简单窗口拖动

预览地址:预览

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<TITLE>blogch.cn自娱自乐简单窗口拖动Version1.0</TITLE>
<style type="text/css">
div ul li{list-style-type:none;}
#div0{position:absolute;width:300px;height:300px;margin-left:300px;margin-top:300px;z-index:1;border:1px solid blue;background-color:#99CCFF;}
#div0 #div00{width:300px;height:25px;border-bottom:1px solid blue;background-color:#00CC66;cursor:move;}
.divMess{width:300px;height:40px;border:1px solid blue;text-align:center;margin:2px 0px 0px;display:block;}
</style>
<script type="text/javascript">

var nowMoveObj = null;
var relLeft;
var relTop;

function $I(d){return document.getElementById(d);}

function showMousePosition(){
$I("div1").innerHTML = "Mouse-position-X:"+window.event.x+"<br>Mouse-position-Y:"+window.event.y;
}

function mouseDown(obj){
nowMoveObj = obj;
obj.style.posotion = "absolute";
$I("div2").innerHTML = "window-position-X:"+nowMoveObj.style.pixelLeft+"<br>window-position-Y:"+nowMoveObj.style.pixelTop;
relLeft = event.x - nowMoveObj.style.pixelLeft;
relTop = event.y - nowMoveObj.style.pixelTop;
$I("div3").innerHTML = "relative-position-X:"+relLeft+"<br>relative-position-Y:"+relTop;
}

window.document.onmouseup = function(){nowMoveObj = null;}

function mouseMove(obj){
if(nowMoveObj != null){
nowMoveObj.style.pixelLeft = event.x-relLeft;
nowMoveObj.style.pixelTop = event.y-relTop;
}
}

</script>
</HEAD>
<BODY onMouseMove="showMousePosition()">
<div id="div0" onMouseDown = "mouseDown(this)" onMouseMove = "mouseMove(this)">
<div id="div00">拖动窗口</div>
<div id="div01">
  <ul>
   <li>CHINA</li>
   <li>AMERICA</li>
  </ul>
</div>
</div>
<div id="div1" class="divMess"></div>
<div id="div2" class="divMess"></div>
<div id="div3" class="divMess"></div>
</BODY>
</HTML>

posted on 2007-04-16 15:26 jom_ch 阅读( ...) 评论( ...) 编辑收藏

转载于:https://www.cnblogs.com/jom-ch/archive/2007/04/16/2676081.html

aodan5223

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js简单窗口拖动

js简单窗口拖动预览地址:预览<!DOCTYPE HT...
复制链接

扫一扫