如何让JavaScript中编程创建的dragover事件正常工作？

不用折腾手动创建dragover事件，浏览器原生的拖拽流程就支持你要的需求——核心是利用拖拽会话里的dataTransfer对象传递被拖拽元素的属性，全程不用全局变量。

核心思路 #

在dragstart事件触发时，把被拖拽元素的属性存入dataTransfer（这个对象在整个拖拽周期里是共享的），然后在每个放置目标的dragover事件里，取出这个属性和目标元素的属性对比，决定是否允许放置。

修正后的代码示例 #

<script>
  // 拖拽开始时，把被拖拽元素的属性存入dataTransfer
  function dragStart(event) {
    const draggedEl = event.target;
    // 这里存自定义的data-type属性，复杂数据可以转成JSON字符串存
    event.dataTransfer.setData('text/plain', draggedEl.dataset.type);
    // 明确设置允许的拖拽效果
    event.dataTransfer.effectAllowed = 'all';
  }

  // 处理放置目标的dragover事件
  function handleDragOver(event) {
    // 取出之前存的被拖拽元素属性
    const draggedType = event.dataTransfer.getData('text/plain');
    const dropTarget = event.target;

    // 按你的需求判断：比如只有目标元素的data-type和拖拽元素匹配才允许放置
    if (dropTarget.dataset.type === draggedType || dropTarget.dataset.type === 'all') {
      event.preventDefault(); // 必须调用这个才允许放置
      event.dataTransfer.dropEffect = 'copy'; // 可选：给用户显示拖拽反馈图标
    }
    // 不匹配的话啥也不做，浏览器自动显示禁止放置的图标
  }

  function drop(event) {
    event.preventDefault();
    const draggedType = event.dataTransfer.getData('text/plain');
    console.log('放置的元素类型:', draggedType);
    // 这里加放置后的逻辑，比如移动元素、更新内容等
  }
</script>

<body>
  <!-- 只接受image类型的拖拽元素 -->
  <div id="div1" data-type="image" ondrop="drop(event)" ondragover="handleDragOver(event)"></div>
  <!-- 只接受document类型的拖拽元素 -->
  <div id="div2" data-type="document" ondrop="drop(event)" ondragover="handleDragOver(event)"></div>
  <!-- 接受所有类型 -->
  <div id="div3" data-type="all" ondrop="drop(event)" ondragover="handleDragOver(event)"></div>
  <br>
  <!-- 被拖拽的图片，类型为image -->
  <img id="drag1" draggable="true" data-type="image" ondragstart="dragStart(event)" src="your-image.jpg" alt="可拖拽图片">
</body>

为什么之前的方法没用？ #

你手动创建DragEvent和DataTransfer的方式，根本没融入浏览器原生的拖拽会话。原生拖拽的dataTransfer是浏览器在拖拽开始时自动创建并绑定到当前会话的，你自己造的DataTransfer实例不会被浏览器认可，所以effectAllowed一直是none，自然无法触发放置行为。

关键细节 #

• 如果要传递复杂的元素属性，比如多个字段，可以用JSON.stringify()把对象转成字符串存入dataTransfer，取出时用JSON.parse()解析。
• dragover事件里必须调用event.preventDefault()，否则浏览器会默认禁止所有放置操作。
• 全程没有全局变量，所有数据都通过拖拽会话的dataTransfer传递，安全又简洁。

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