JavaScript 互动程序（非 canvas）

贡献者： addis

本文处于草稿阶段。

图 1：运行效果

　　以下程序可以在网页上（非 canvas）画一个圆并实现鼠标拖动。小时百科的知识树底层就是用这种方式实现的。

代码 1：drag_ball.html

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Draggable Ball</title>
<style>
	#ball {
		width: 50px;
		height: 50px;
		background-color: blue;
		border-radius: 50%;
		position: absolute;
		cursor: pointer;
	}
</style>
</head>

<body>

<div id="ball"></div>

<script>
	let ball = document.getElementById('ball');
	let isDragging = false;
	let diffX = 0, diffY = 0;
	function onMouseDown(e) {
		isDragging = true;
		diffX = e.clientX - ball.getBoundingClientRect().left;
		diffY = e.clientY - ball.getBoundingClientRect().top;	
	}
	function onMouseMove(e) {
		if (isDragging) {
			ball.style.left = e.clientX - diffX + 'px';
			ball.style.top = e.clientY - diffY + 'px';
		}
	}
	function onMouseUp() {
		isDragging = false;
	}
	ball.addEventListener('mousedown', onMouseDown);
	document.addEventListener('mousemove', onMouseMove);
	document.addEventListener('mouseup', onMouseUp);
</script>
</body>
</html>

致读者：小时百科一直以来坚持所有内容免费无广告，这导致我们处于严重的亏损状态。长此以往很可能会最终导致我们不得不选择大量广告以及内容付费等。因此，我们请求广大读者热心打赏 ，使网站得以健康发展。如果看到这条信息的每位读者能慷慨打赏 20 元，我们一周就能脱离亏损，并在接下来的一年里向所有读者继续免费提供优质内容。但遗憾的是只有不到 1% 的读者愿意捐款，他们的付出帮助了 99% 的读者免费获取知识，我们在此表示感谢。