给你发个原生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>
温馨提示：答案为网友推荐，仅供参考
第1个回答 2014-07-23
alert($("#zhanghao").attr("name"));追问
我是指里面这个DIV移动，不会跑出蓝色DIV外。
http://blog.csdn.net/n602655099/article/details/38064837
希望有帮助。
相似回答