为何通过按钮appendChild添加的可拖拽div无法正常工作？求助

你的问题核心在于新创建的div元素没有绑定拖拽相关的事件监听，而且现有的拖拽逻辑也不够完整（缺少鼠标按下启动拖拽、松开停止拖拽的完整流程）。我来一步步帮你修复：

问题分析 #

1. 你只定义了divMove函数，但没有把它绑定到新创建的.babydiv元素的事件上；
2. 拖拽功能需要完整的事件链：mousedown（触发拖拽开始）→ mousemove（更新拖拽位置）→ mouseup（停止拖拽），你的代码里缺少前两个关键的事件绑定逻辑。

修复后的完整代码 #

JavaScript部分 #

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

function adddiv() {
  var newdiv = document.createElement("div");
  newdiv.className = "babydiv";
  
  // 给新生成的div绑定拖拽触发事件
  newdiv.addEventListener('mousedown', function(e) {
    // 记录鼠标按下时，相对于div左上角的偏移量，避免拖拽时div跳转到鼠标位置
    const offsetX = e.clientX - this.getBoundingClientRect().left;
    const offsetY = e.clientY - this.getBoundingClientRect().top;
    
    // 定义拖拽时的位置更新函数
    function divMove(e){
      this.style.top = (e.clientY - offsetY) + 'px';
      this.style.left = (e.clientX - offsetX) + 'px';
    }
    
    // 鼠标移动时触发位置更新，绑定当前div为this指向
    document.addEventListener('mousemove', divMove.bind(this));
    
    // 鼠标松开时移除监听，停止拖拽
    document.addEventListener('mouseup', function cleanup() {
      document.removeEventListener('mousemove', divMove.bind(this));
      document.removeEventListener('mouseup', cleanup);
    }.bind(this));
  });
  
  diva.appendChild(newdiv);
}

CSS部分（补充你未写完的完整样式） #

* {
  padding: 0;
  margin: 0;
}

#div-a {
  position: relative;
  width: 300px;
  height: 300px;
  background: #eee;
  border: 1px solid #ccc;
}

.babydiv {
  position: absolute;
  width: 50px;
  height: 50px;
  background: #42b983;
  cursor: move;
}

关键修复点说明 #

• 绑定事件到新元素：在创建newdiv后立即添加mousedown监听，确保每个新生成的div都具备拖拽能力；
• 记录偏移量：解决拖拽时div直接跳转到鼠标位置的问题，让拖拽体验更自然；
• 动态管理事件监听：鼠标按下时添加mousemove监听，松开时移除，防止鼠标松开后仍持续触发拖拽；
• 绑定this指向：通过bind确保divMove函数里的this始终指向当前被拖拽的div元素。

现在点击按钮生成的div就可以正常拖拽啦！

内容的提问来源于stack exchange，提问作者Can74