<html>
<head>
<title>可拖动的层</title>
<script src="jquery-1.4.1.js" language="javascript"></script>
<script language="javascript" >
//验证是否按下鼠标左键的变量
var down=false;
//分别为鼠标x轴y轴，div层坐标x轴y轴
var mX,mY,dX,dY;
//当鼠标左键点指定div时触发
function mouseDown()
{
down=true;//鼠标左键在点住期间，down值为true
mX=event.clientX;//获得鼠标坐标，并记录当前坐标给变量
mY=event.clientY;//获得鼠标坐标，并记录当前坐标给变量，以便后面计算
dX=parseInt(div1.style.left);//获得div1（这是层的Id值）的坐标，因为本来是px的字符串，所以要取其中的整数值
dY=parseInt(div1.style.top);//parseInt()就是用来截取整数值的方法
}
//鼠标左键松开时触发up事件
function up()
{
//如果down为true时，因为鼠标左键不按状态下都属于up事件，所以要加上验证
if(down)
{
down=false;//设置down为false，表示左键没有点住
}
}
//鼠标在指定区域移动时会触发此事件
function move()
{
//必先判断鼠标左键已被在指定区域按下
if(down){
//设置该层坐标等于原坐标加上鼠标移动的坐标
div1.style.left=dX+event.clientX-mX;
div1.style.top=dY+event.clientY-mY;
}
}
//此变量t控制漂浮效果的次数
var t=0;
//此方法用于停止移动时的下沉漂浮效果
function zuobiao()
{
$("#x").val(event.clientX);
$("#y").val(event.clientY);
}
function weizhi()
{
var x=parseInt(div1.style.left)+parseInt(div1.style.width)
var y=parseInt(div1.style.top)+parseInt(div1.style.height)
alert("坐标X："+x+",坐标Y："+y);
}
</script>
</head>
<body onMouseMove="move();zuobiao()" onMouseUp="up()" style="height:500px; width:1000px" >
<div style="border:#000000 1px solid; width:100%; height:100%">
X坐标：<input type="text" value="" id="x" /><br />
Y坐标：<input type="text" value="" id="y" />
<div id="div1" style="background-color:#BBBBBB; width:200px; height:200px; position:absolute; top:100px; left:200px; border:#6666FF; border:double;">
<div id="title" onMouseDown="mouseDown()" onMouseUp="up()" style="width:200px; height:20px; background-color:#330033; top:70px; left:136px; z-index:200; position: static; font-size:<?xml:namespace prefix = st1 />9pt; color:#FFFFFF; padding-top:5px; padding-left:5px;">
浮动窗口实例。
</div>
<font size="2" color="#6666FF"> <br>这个可以移动的层看起来怎么样？与之前的模式窗口结合起来就可以做一个可以移动的模式窗口了！</font>
<div style="background-color:#000000;width:100px; height:20px; margin-bottom:0px; margin-left:100px" onClick="weizhi()"></div>
</div>
</div>
</body>
</html>
移动div+改变div大小+右键添加新的div+div只能在一个范围的。。JQ+js+html源码。。
5星 · 超过95%的资源 需积分: 9 25 浏览量
2012-08-09
17:26:15
上传
评论 1
收藏 92KB RAR 举报 
平面仓库.rar （18个子文件） 
平面仓库 
test.html 933B
ligerui-menu.css 2KB ligerui-layout.css 5KB ligerui-all.css 278B ligerui-common.css 5KB base.js 26KB Untitled-1.html 1KB ligerui-tab.css 4KB ligerui-grid.css 14KB jquery-1.3.2.min.js 56KB ligerResizable.js 9KB jquery-1.4.1.js 165KB ligerui-form.css 12KB ligerDrag.js 10KB 鼠标移动层.html 3KB 改变大小和移动div.htm 7KB ligerui-dialog.css 11KB ligerui-tree.css 2KB
- 1
- 2
- 3
前往页