如何在drop事件触发时启用提交按钮？附拖拽功能代码示例

没问题，我来帮你实现这个功能！核心思路就是在drop事件触发的函数里，添加启用提交按钮的逻辑就好。

第一步：确保提交按钮存在且初始禁用 #

先在你的页面里添加提交按钮，并且设置初始为禁用状态（用disabled属性）：

<button id="submitBtn" disabled>提交</button>

第二步：修改drop函数，添加启用按钮的逻辑 #

直接在你现有的drop函数最后，加入启用按钮的代码就行。当拖拽完成后，我们通过按钮的ID获取到它，然后把disabled属性设为false：

function allowDrop(ev) { ev.preventDefault(); }
function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); }
function drop(ev) {
  ev.preventDefault(); 
  var data = ev.dataTransfer.getData("text"); 
  ev.target.appendChild(document.getElementById(data));
  // 新增：启用提交按钮
  document.getElementById("submitBtn").disabled = false;
}

额外优化（可选） #

如果需要处理用户把图片拖出目标区域后再次禁用按钮的场景，可以给目标区域添加dragleave事件监听，不过这部分是可选的，看你的需求：

function handleDragLeave(ev) {
  // 检查目标区域是否还包含拖拽的图片
  const dragImg = document.getElementById("drag1");
  if (!document.getElementById("div1").contains(dragImg)) {
    document.getElementById("submitBtn").disabled = true;
  }
}

然后修改目标区域的HTML：

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" ondragleave="handleDragLeave(event)"></div>

这样就完成啦，当图片成功拖到目标区域后，提交按钮就会自动启用了！

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