把代码发出来供大家学习,这个是加层吸附的,
没加吸附的在这个地址:http://blog.csdn.net/yhn11/archive/2010/01/19/5210739.aspx<script type="text/javascript" src="js/jquery-1.3.2.min.js">
</script>
<body background="HeadImg/0d2d10df92471713632798c9.jpg;">
<div id="layer" style="background-color:#FF9933; width:500px; height:300px; border:solid 1px;">
<div id="title" style="height:20px; width:500px; background-color:#0000CC; cursor:move;">
</div>
</div>
x:<span id="x"></span>
y:<span id="y"></span>
</body>
<script type="text/javascript">
//页面加载为层绑定插件
$(function(){
divMove($("#title"),$("#layer"));
});
//参数1:触发移动的层
//参数2:要移动的层
function divMove(layer,movelayer){
//在页面创建2个隐藏域。
$(layer).append('<input type="hidden" id="div_x" value="0" /><input type="hidden" id="div_y" value="0" />');
$(layer).css({position:"absolute","z-Index":"100"});
$(movelayer).css({position:"absolute","z-Index":"99"});
var bclick=false;//记录鼠标是否已经被点击
var currenMouse= null;//用来存储点击鼠标时移动层的对象
//取得上一次鼠标释放后层的位置
var x=$("#x").attr("value");
var y=$("#y").attr("value");
//初始化div的offset属性
var offsetX=0;
var offsetY=0;
//鼠标点击事件
$(layer).mousedown(function()
{
bclick=true;
currenMouse=this;
offsetX=event.offsetX;
offsetY=event.offsetY;
});
//鼠标点击对象释放事件
$(currenMouse).mouseup(function()
{
//把对象存储在x,y中
$("#x").attr("value",x);
$("#y").attr("value",y);
bclick=false;
});
//在层里面移动的事件
$(document).mousemove(function(){
//如果鼠标没有处于点击状态
if(!bclick){
return;
}
//得到吸附处理后的层坐标
x=event.clientX-offsetX;
y=event.clientY-offsetY;
$("#x").text(x);
$("#y").text(y);
//修改层的样式
$(movelayer).css("left",x);
$(movelayer).css("top",y);
});
}
</script>当拖动层的范围超过屏幕显示时怎么让屏幕不随层移动?效果(打开QQ空间查看好友投票时弹出的层)
求高手给个思路。
没加吸附的在这个地址:http://blog.csdn.net/yhn11/archive/2010/01/19/5210739.aspx<script type="text/javascript" src="js/jquery-1.3.2.min.js">
</script>
<body background="HeadImg/0d2d10df92471713632798c9.jpg;">
<div id="layer" style="background-color:#FF9933; width:500px; height:300px; border:solid 1px;">
<div id="title" style="height:20px; width:500px; background-color:#0000CC; cursor:move;">
</div>
</div>
x:<span id="x"></span>
y:<span id="y"></span>
</body>
<script type="text/javascript">
//页面加载为层绑定插件
$(function(){
divMove($("#title"),$("#layer"));
});
//参数1:触发移动的层
//参数2:要移动的层
function divMove(layer,movelayer){
//在页面创建2个隐藏域。
$(layer).append('<input type="hidden" id="div_x" value="0" /><input type="hidden" id="div_y" value="0" />');
$(layer).css({position:"absolute","z-Index":"100"});
$(movelayer).css({position:"absolute","z-Index":"99"});
var bclick=false;//记录鼠标是否已经被点击
var currenMouse= null;//用来存储点击鼠标时移动层的对象
//取得上一次鼠标释放后层的位置
var x=$("#x").attr("value");
var y=$("#y").attr("value");
//初始化div的offset属性
var offsetX=0;
var offsetY=0;
//鼠标点击事件
$(layer).mousedown(function()
{
bclick=true;
currenMouse=this;
offsetX=event.offsetX;
offsetY=event.offsetY;
});
//鼠标点击对象释放事件
$(currenMouse).mouseup(function()
{
//把对象存储在x,y中
$("#x").attr("value",x);
$("#y").attr("value",y);
bclick=false;
});
//在层里面移动的事件
$(document).mousemove(function(){
//如果鼠标没有处于点击状态
if(!bclick){
return;
}
//得到吸附处理后的层坐标
x=event.clientX-offsetX;
y=event.clientY-offsetY;
$("#x").text(x);
$("#y").text(y);
//修改层的样式
$(movelayer).css("left",x);
$(movelayer).css("top",y);
});
}
</script>当拖动层的范围超过屏幕显示时怎么让屏幕不随层移动?效果(打开QQ空间查看好友投票时弹出的层)
求高手给个思路。
先获取window的宽高, _w, _h
可以判断 if( x<0 || x>= _w - $(movelayer).width() ){return}
y方向同理, 在layer越界时return就行了
给html,body{overflow-x:hidden}试试~~~
先保存拖动层的原始大小
当层拖动时 根据原始大小判断是否会出界 根据出界的多少 重新设置层的大小 没出界则设置原始大小 拖动层应该设置overflow:hidden