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/

希望这有帮助。

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

1 个答案: