JSFiddle - React, Tailwind, and code Playground

by Vladimir

HTML

<div id="big">
  <div id="small"></div>
</div>

CSS

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;
}

JavaScript

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';
}