如何在拖拽Div到目标Div位置时显示指定表单？

我来帮你搞定这个拖拽触发表单显示的需求！HTML5自带的拖放API就能完美实现，不用额外插件。结合你给出的代码结构，我整理了完整的实现方案：

我们需要利用HTML5的拖放API，监听几个关键事件来完成这个功能，下面是适配你现有代码的完整示例：

完整代码示例 #

<div style="width:100%;">
  <!-- 可拖拽的Div A -->
  <div class="d">
    <div class="draggable1" style="background-color: black;color:white" id="first" draggable="true">
      A
    </div>
  </div>

  <!-- 目标放置区域（你可以替换成自己的目标Div） -->
  <div class="target-drop-area" style="width: 200px; height: 100px; border: 2px dashed #ccc; margin-top: 20px; padding: 10px;">
    拖拽A到这里
  </div>

  <!-- 需要显示的表单Div -->
  <div style="display: none;width:196px;" id="formnew1">
    <div class="container">
      <form style="background-color: white; padding: 10px; border:1px solid #ddd;" id="targetinsert1">
        <center>
          <label>姓名：</label>
          <input type="text" name="username" />
          <br><br>
          <label>邮箱：</label>
          <input type="email" name="email" />
          <br><br>
          <button type="submit">提交表单</button>
        </center>
      </form>
    </div>
  </div>
</div>

<script>
  // 获取页面元素
  const draggableElement = document.getElementById('first');
  const targetArea = document.querySelector('.target-drop-area');
  const formDiv = document.getElementById('formnew1');

  // 拖拽开始时标记拖拽元素
  draggableElement.addEventListener('dragstart', (e) => {
    // 存储拖拽标识，方便后续验证
    e.dataTransfer.setData('text/plain', 'drag-element-A');
  });

  // 拖拽经过目标区域时，允许放置（必须阻止默认行为）
  targetArea.addEventListener('dragover', (e) => {
    e.preventDefault();
    // 给目标区域添加视觉反馈，提升体验
    targetArea.style.backgroundColor = '#f5f5f5';
  });

  // 拖拽离开目标区域时，恢复样式
  targetArea.addEventListener('dragleave', () => {
    targetArea.style.backgroundColor = 'transparent';
  });

  // 元素被放置到目标区域时，显示表单
  targetArea.addEventListener('drop', (e) => {
    e.preventDefault();
    // 恢复目标区域样式
    targetArea.style.backgroundColor = 'transparent';
    // 获取拖拽标识，验证是否是我们需要的元素（可选）
    const dragId = e.dataTransfer.getData('text/plain');
    if (dragId === 'drag-element-A') {
      // 显示表单Div
      formDiv.style.display = 'block';
    }
  });
</script>

关键逻辑说明 #

• 标记可拖拽元素：给Div A添加draggable="true"属性，这是HTML5拖放功能的基础。
• dragstart事件：在拖拽开始时记录元素标识，方便后续判断是否是目标拖拽元素。
• dragover事件：必须调用e.preventDefault()，否则浏览器会默认禁止放置操作，同时可以在这里添加视觉反馈（比如改变目标区域背景）。
• drop事件：这是触发表单显示的核心节点，在元素被成功放置后，修改表单Div的display属性为block即可显示表单。

如果你的目标Div已经有自己的类名或ID，只需要把示例中的.target-drop-area替换成你实际的选择器就行。

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