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

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 上设置 select 目标，然后为 mousemove 添加一个事件侦听器，随着鼠标移动改变目标的坐标，并在触发 mouseup 时停止监听 mousemove 事件。

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

希望对您有所帮助。

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

Why my code isnt working?

javascript

draggable

appendchild