<style>
#wrap1 {
	width: 600px;
	height: 200px;
	border: 1px solid;
	position: relative;
}
#box1 {
	position: absolute;
	width: 100px;
	height: 50px;
	background-color: lightblue;
	display: grid;
	place-items: center;
	user-select: none;
}
</style>

<div id="wrap1">
	<div id="box1">拖曳我</div>
</div>

<script>

let draggable = false, /* 可拖动变量 */
	currentbox = null; /* 当前拖动对象 */

box1.onmousedown = (e) => {
	draggable = true; //鼠标指针在盒子上按下时可拖动
	currentbox = box1; //待拖动的盒子标识
};

//基于文档的鼠标移动事件
document.onmousemove = (e) => {
	if(!draggable && !currentbox) return; //移动条件不具备时不执行后面语句
	let rect = wrap1.getBoundingClientRect(); //获取父元素对象 : 返回一系列父元素的属性值
	/*	计算子元素位置
		① left 属性值计算 : 指针X坐标 - 父元素left值 - 子元素宽度÷2
		② top 属性值计算 : 指针Y坐标 - 父元素top值 - 子元素高度÷2
		clientX : 鼠标指针客户端水平坐标
		clientY : 鼠标指针客户端纵向坐标
		offsetWidth : 元素宽度
		offsetHeight : 元素高度
	*/
	let _x = e.clientX - rect.left - currentbox.offsetWidth / 2,
		_y = e.clientY - rect.top - currentbox.offsetHeight / 2;
	//驱动元素移动
	currentbox.style.cssText += `
		left: ${_x}px;
		top: ${_y}px;
	`;
};

//基于文档的鼠标按键弹起事件
document.onmouseup = () => {
	draggable = false; //鼠标指针在文档中松开后不可拖动
	currentbox = null; //清除待拖动盒子标识
};

</script>