用Jquery，如何编写：一个外层DIV，内层一个DIV，如何让内层DIV当鼠标拖动就可移动但不可跑出外层DIV。
2个回答
展开全部
给你发个原生js代码的例子，其实就是简单的onmousedown-onmousemove-onmouseup，限制一下里面div的left和top值
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1
{
width: 400px;
height: 300px;
background: #ccc;
position: relative;
}
#div2
{
width: 100px;
height: 100px;
background: red;
position: relative;
}
</style>
<script type="text/javascript">
window.onload=function()
{
var oDiv1=document.getElementById('div1');
var oDiv2=document.getElementById('div2');
var disX=0;
var disY=0;
//鼠标按下
document.onmousedown=function(ev)
{
var oEvent=ev||event;
disX=oEvent.clientX-oDiv2.offsetLeft;//鼠标当前的位置横坐标
disY=oEvent.clientY-oDiv2.offsetTop;//鼠标当前的位置纵坐标
//鼠标移动
document.onmousemove=function(ev)
{
var oEvent=ev||event;
var l=oEvent.clientX-disX;//重新计算鼠标的横坐标
var t=oEvent.clientY-disY;//重新计算鼠标的纵坐标
//限制里面div的left
if(l<0)
{
l=0;
}
//限制里面div的top
if(t<0)
{
t=0;
}
//限制里面div的left
if(l>oDiv1.offsetWidth-oDiv2.offsetWidth)
{
l=oDiv1.offsetWidth-oDiv2.offsetWidth;
}
//限制里面div的top
if(t>oDiv1.offsetHeight-oDiv2.offsetHeight)
{
t=oDiv1.offsetHeight-oDiv2.offsetHeight;
}
//重新定位里面的div的位置
oDiv2.style.left=l+'px';
oDiv2.style.top=t+'px';
}
//鼠标抬起，释放onmouseove事件
document.onmouseup=function(ev)
{
document.onmousemove=null
}
return false;
}
}
</script>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
alert($("#zhanghao").attr("name"));
追问
我是指里面这个DIV移动，不会跑出蓝色DIV外。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
