把代码发出来供大家学习,这个是加层吸附的,
没加吸附的在这个地址: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空间查看好友投票时弹出的层)
求高手给个思路。

解决方案 »

  1.   

    在mousemove里面进行判断呗.
    先获取window的宽高, _w, _h
    可以判断 if( x<0 || x>= _w - $(movelayer).width() ){return}
    y方向同理, 在layer越界时return就行了
      

  2.   

    是不是有HTML滚动条???
    给html,body{overflow-x:hidden}试试~~~
      

  3.   

    你们有jquery  text焦点集中下拉一个表格,选中后会把ID返回text框中?
      

  4.   

    1种方法是
    先保存拖动层的原始大小 
    当层拖动时 根据原始大小判断是否会出界 根据出界的多少 重新设置层的大小 没出界则设置原始大小 拖动层应该设置overflow:hidden
      

  5.   

    哦. 我知道lz的意思了.创建一个与窗口等大的层, 就是那个蒙板. 在这个<div id="Outer"><对话框></对话框></div>. 将Outer的over-flow, hidden就可以了. 更优的体验是在browser的size的change时, 重设Outer的大小