javascript - 为什么我的代码不起作用？

Question

我有一个按钮。您可以 appendChild 一个可拖动的 div，但它不起作用。 有人可以帮我吗？

JSFiddle:https://jsfiddle.net/no2o9vo4/1/

var diva = document.getElementById("div-a");

function adddiv() {
	var newdiv = document.createElement("div");
	newdiv.className = "babydiv";
	
	diva.appendChild(newdiv);
}


function divMove(e){
  	this.style.top = e.clientY + 'px';
  	this.style.left = e.clientX  + 'px';
}

* {
	padding: 0;
	margin: 0;
}

#div-a {
	position: relative;
	width: 300px;
	height: 300px;
	background-color: red;
}

.babydiv {
	transform: translate(-50%, -50%);
	position: relative;
	width: 300px;
	height: 200px;
	background-color: blue;
}

<div id="div-a">
	<div class="babydiv" onmousedown="divMove();">
			
			
	</div>
</div>
		
<a onclick="adddiv()">add div</a>

Answer 1

使用事件的坐标不就只能代表事件(mousedown)发生时的坐标吗？意思是你不能移动它。

我想您必须在 mousedown 上选择目标，然后为 mousemove 添加事件监听器，随着鼠标移动更改目标的坐标，并在触发 mouseup 时停止监听 mousemove 事件。

我在这里快速演示了我的观点: https://jsfiddle.net/ymqycx0e/

希望这有帮助。