1、css代码
#big { border: 1px solid #FF3300; width: 300px; height: 300px; position: relative; } #small { background: #99CC00; width: 50px; height: 50px; position: absolute; cursor: pointer; }
2、JavaScript代码
<script language="javascript"> function small_down(e) { var obig = document.getElementById("big"); var osmall = document.getElementById("small"); var e = e || window.event; /*用于保存小的div拖拽前的坐标*/ osmall.startX = e.clientX - osmall.offsetLeft; osmall.startY = e.clientY - osmall.offsetTop; /*鼠标的移动事件*/ document.onmousemove = function(e) { var e = e || window.event; osmall.style.left = e.clientX - osmall.startX + "px"; osmall.style.top = e.clientY - osmall.startY + "px"; /*对于大的DIV四个边界的判断*/ if (e.clientX - osmall.startX <= 0) { osmall.style.left = 0 + "px"; } if (e.clientY - osmall.startY <= 0) { osmall.style.top = 0 + "px"; } if (e.clientX - osmall.startX >= 250) { osmall.style.left = 250 + "px"; } if (e.clientY - osmall.startY >= 250) { osmall.style.top = 250 + "px"; } }; /*鼠标的抬起事件,终止拖动*/ document.onmouseup = function() { document.onmousemove = null; document.onmouseup = null; }; } </script>
3、html代码
<body> <div id="big"> <div id="small" onmousedown="small_down(event)"></div> </div> </body>
---恢复内容结束---