There is a little div inside a big div . Through JS, Drag'n'Drop is applied to a small div . It is necessary to limit the area of ​​movement of the smaller block.

Attempt to implement

But if you try to sharply move the white block to the left or up, it will “stick” near the border. How to fix it?

 var small = document.getElementById('small'); small.onmousedown = function(e) { move(e); function move(e) { if (e.pageX > 0) { small.style.left = e.pageX + 'px'; } if (e.pageY > 0) { small.style.top = e.pageY + 'px'; } } document.onmousemove = function(e) { move(e); } small.onmouseup = function() { document.onmousemove = null; small.onmouseup = null } } 
 #big { width: 12cm; height: 12cm; background-color: #DDDDDD; } #small { position: absolute; left: 0.75cm; top: 0.75cm; width: 4cm; height: 4cm; background-color: #FFFFFF; } 
 <div id="big"> <div id="small"></div> </div>

  • It is not entirely clear, should we be able to move the block above and to the left of the edge of the document, or does it still limit movement within the gray block? - br3t
  • @ br3t Restrict movement inside. And so that when you move the mouse pointer over the edges of a large block, the smaller div close to the border. - Andrei

1 answer 1

For the correct positioning of small it is necessary to calculate the coordinates for which this small cannot be released. Those. we have four borders: upper, lower, left, right.

For clarity, the example added indents for big and a background for body .

 var small = document.getElementById('small'); var big = document.getElementById('big'); //* флаг перетаскивания var isDrag = false; //* ограничения, за которые нельзя вытащить small var limits = { top: big.offsetTop, right: big.offsetWidth + big.offsetLeft - small.offsetWidth, bottom: big.offsetHeight + big.offsetTop - small.offsetHeight, left: big.offsetLeft }; //* вкл/выкл режим перетаскивания small.onmousedown = function(e) { isDrag = true; } document.onmouseup = function() { isDrag = false; } document.onmousemove = function(e) { if (isDrag) { move(e); } } //* вычисление координат function move(e) { var newLocation = { x: limits.left, y: limits.top }; if (e.pageX > limits.right) { newLocation.x = limits.right; } else if (e.pageX > limits.left) { newLocation.x = e.pageX; } if (e.pageY > limits.bottom) { newLocation.y = limits.bottom; } else if (e.pageY > limits.top) { newLocation.y = e.pageY; } relocate(newLocation); } //* размещение small function relocate(newLocation) { small.style.left = newLocation.x + 'px'; small.style.top = newLocation.y + 'px'; } 
 body { background: #EEF; } #big { width: 12cm; height: 12cm; background-color: #DDDDDD; margin: 2cm; } #small { position: absolute; left: 2.75cm; top: 2.75cm; width: 4cm; height: 4cm; background-color: #FFFFFF; } 
 <div id="big"> <div id="small"></div> </div>

  • @Andrey, I don’t know what specific task you have, but I would be confused still by keeping the cursor position inside small and would work with the relative coordinates small inside inside big . - br3t
  • Yes, you are right, but it is already possible to do it yourself, using only the directory. - Andrei
  • one
    @ br3t , thanks for the quick and clear answer! - Andrei
  • did not find in the directory, tell me, if not difficult, how to maintain positioning - Optimus
  • one
    @ Dmitry Maslov, see non-standard developer.mozilla.org/en-US/docs/Web/API/UIEvent/layerX and more standard developer.mozilla.org/en-US/docs/Web/API/MouseEvent/offsetX - br3t