<style>
#pa {
	margin: 30px auto;
	width: 600px;
	height: 300px;
	border: 1px solid gray;
	box-sizing: border-box;
	position: relative;
}
#son {
	position: absolute;
	width: 100px;
	height: 50px;
	font: normal 14px / 50px sans-serif;
	text-align: center;
	user-select: none;
	cursor: pointer;
	background: lightblue;
}
</style>

<div id="pa">
	<div id="son">拖曳&点击</div>
</div>

<script>
var curtime = 0, draggable = false;
var offsetx = son.offsetWidth / 2, offsety = son.offsetHeight / 2;

son.onmousedown = (e) => {
	if(e.button != 0) return;
	curtime = new Date().getTime();
	draggable = true;
};

son.onmouseup = (e) => {
	if(e.button != 0) return;
	curtime = new Date().getTime() - curtime;
	if(curtime < 200) son.style.background = `#${Math.random().toString(16).substring(2,8)}`;
	curtime = 0;
};

pa.onmousemove = (e) => {
	if(!draggable) return;
	var rt = pa.getBoundingClientRect();
	let left = e.clientX - rt.left - offsetx, top = e.clientY - rt.top - offsety;
	if(left < 0) left = 0;
	if(top < 0) top = 0;
	if(left > rt.width - offsetx * 2) left = rt.width - offsetx * 2;
	if(top > rt.height - offsety * 2) top = rt.height - offsety * 2;
	son.style.cssText += `left: ${left}px; top: ${top}px;`;
};

document.onmouseup = () => draggable = false;
</script>