用Jquery，如何编写：一个外层DIV，内层一个DIV，如何让内层DIV当鼠标拖动就可移动但不可跑出外层DIV。

Posted 2023-05-05

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用Jquery，如何编写：一个外层DIV，内层一个DIV，如何让内层DIV当鼠标拖动就可移动但不可跑出外层DIV。相关的知识，希望对你有一定的参考价值。

给你发个原生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>

参考技术A alert($("#zhanghao").attr("name"));追问

我是指里面这个DIV移动，不会跑出蓝色DIV外。