<style>
#wrap2 {
	margin: 30px auto;
	position: relative;
	width: 600px;
	height: 300px;
	border: 1px solid gray;
}
#box2 {
	position: absolute;
	width: 100px;
	height: 50px;
	background: lightblue;
	display: grid;
	place-items: center;
}
#mypic {
	left: 120px;
	position: absolute;
	width: 142px;
	height: 132px;
}
</style>

<div id="wrap2">
	<div id="box2" draggable="true">拖曳我</div>
	<img id="mypic" src="https://638183.freep.cn/638183/small/hxxb.webp" title="拖曳我" alt="" />
</div>

<script>
const dragElms = [box2, mypic]; //待拖曳元素 : 两个

//父元素监听拖曳经过事件 : 取消默认行为（出现禁止放下图标）
wrap2.ondragover = (e) => e.preventDefault();

//子元素监听 drag* 事件
dragElms.forEach(elm => {
	//监听dragend拖曳结束事件 : 计算left和top值并安置子元素
	elm.ondragend = (e) => {
		let rect = wrap2.getBoundingClientRect(); //获得父元素属性值对象
		let _x = e.clientX - rect.left - elm.offsetWidth / 2, /* 计算子元素X坐标值 */
			_y = e.clientY - rect.top - elm.offsetHeight / 2; /* 计算子元素Y坐标值 */
		//下面条件判断语句用于放置越界
		if(_x < 0) _x = 0;
		if(_x > rect.width - elm.offsetWidth) _x = rect.width - elm.offsetWidth;
		if(_y < 0) _y = 0;
		if(_y > rect.height - elm.offsetHeight) _y = rect.height - elm.offsetHeight;
		//定位子元素
		elm.style.cssText += `
			left: ${_x}px;
			top: ${_y}px;
		`;
	};
});
</script>