Mover un rectángulo dentro de otro

El siguiente artículo es un ejemplo de uso de la función JsMove. Éste es el código:

function Example() {
	var container = document.querySelector('#example');
	var box = container.querySelector('div');
	var limits;

	function startFn(event) {
		event.stopPropagation();
		event.preventDefault();
		let a = container.getBoundingClientRect();
		let b = box.getBoundingClientRect();
		
		limits = {
			iniX: event.clientX - b.x + a.x,
			iniY: event.clientY - b.y + a.y,
			maxX: a.width - b.width,
			maxY: a.height - b.height
		};
	};

	function moveFn(event) {
		let left = event.clientX - limits.iniX;
		let top = event.clientY - limits.iniY;
		
		if (left < 0) {
			left = 0;
		} else if (left > limits.maxX) {
			left = limits.maxX;
		}
		
		if (top < 0) {
			top = 0;
		} else if (top > limits.maxY) {
			top = limits.maxY;
		}
		
		box.style.left = left + 'px';
		box.style.top = top + 'px';
	};

	function endFn() {
		let letters = '0123456789ABCDEF';
		let color = '#';

		for (let i = 0; i < 6; i++) {
			color += letters[Math.floor(Math.random() * 16)];
		}
		box.style.backgroundColor = color;
	};

	// move box
	JsMove(box, startFn, moveFn, endFn);
}

Y este será el resultado:

Conclusión

No queda mucho para agregar, hay dos elementos: container y box; la variable limits guarda los valores iniciales, y la función JsMove con las funciones correspondientes a los eventos de inicio, movimiento y final. Con esta última función todo queda más claro y no es necesario dedicarse a listar los eventos.