js实现子1div拖进2div并跟随2d一起托动并1d可在2d随意拖动但不能超过2d的范围

<!DOCTYPE>





</p> <pre><code>function small_down(e1) { var div1 = document.getElementById(&quot;div1&quot;); var osmall = document.getElementById(&quot;small&quot;); var e1 = e1 || event; /*用于保存小的div拖拽前的坐标*/ osmall.startX = e1.clientX - osmall.offsetLeft; osmall.startY = e1.clientY - osmall.offsetTop; /*鼠标的移动事件*/ document.onmousemove = function(e1) { var e1 = e1 || event; osmall.style.left = e1.clientX - osmall.startX + &quot;px&quot;; osmall.style.top = e1.clientY - osmall.startY + &quot;px&quot;; /*对于大的DIV四个边界的判断*/ if (e1.clientX - osmall.startX &lt;= 0) { osmall.style.left = 0 + &quot;px&quot;; } if (e1.clientY - osmall.startY &lt;= 0) { osmall.style.top = 0 + &quot;px&quot;; } if (e1.clientX - osmall.startX &gt;= 250) { osmall.style.left = 250 + &quot;px&quot;; } if (e1.clientY - osmall.startY &gt;= 250) { osmall.style.top = 250 + &quot;px&quot;; } }; /*鼠标的抬起事件,终止拖动*/ document.onmouseup = function() { document.onmousemove = null; document.onmouseup = null; }; </code></pre> <p>}</p> <pre><code>function big_down(e){ </code></pre> <p>  var div1 = document.getElementById(&quot;div1&quot;); <br>   div1.onmousedown = function(e){<br>     var e = e || event;</p> <p>    var distanceX = e.clientX - div1.offsetLeft;<br>     var distanceY = e.clientY - div1.offsetTop;</p> <p>    document.onmousemove = function(e){<br>       var e = e || event;<br>       div1.style.left = e.clientX - distanceX + &#39;px&#39;;<br>       div1.style.top = e.clientY - distanceY + &#39;px&#39;; <br>     };<br>     document.onmouseup = function(){<br>       document.onmousemove = null;<br>       document.onmouseup = null;<br>     };<br> }; <br> } </p> <p>



<div id="small" onmousedown="small_down(event)" style="background:red;width:50px;height:50px;position:absolute; cursor: pointer;"></div>



请再仔细形容一下问题

问题描述不清晰 请仔细描述该问题

http://www.jq22.com/yanshi3990
看下是这种效果吗?第七个demo。