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

Question

<!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>

Answer 1

请再仔细形容一下问题