Javascript 为什么'；下降'；此网页上未触发事件？

尽管浏览了在线教程来理解原生HTML5 drag'n'drop，但我无法理解为什么我的基本html页面不会触发drop事件

这里有一把小提琴-

代码如下。Html:

<div id="wrapper">
<div id="fixedWidth">
    <div id="modulesBlock"> 
        <div id="mod1" class="module" draggable="true" ></div>
        <div id="mod2" class="module" draggable="true" ></div>
        <div id="mod3" class="module" draggable="true" ></div>
        <div id="mod4" class="module" draggable="true" ></div>
        <div id="mod5" class="module" draggable="true" ></div>
        <div id="mod6" class="module" draggable="true" ></div>
        <div id="mod7" class="module" draggable="true" ></div>
        <div id="mod8" class="module" draggable="true"></div>
        <div id="mod9" class="module" draggable="true" ></div>
        <div id="mod10" class="module" draggable="true"></div>

    </div>
</div>
<div id="theRest">

    <div id="contentBlock">

        <div class="target" id="target1" ></div>
        <div class="target" id="target2" ></div>

    </div>
</div>
</div>

---

当我尝试将模块块（小提琴中的红色）拖到目标（小提琴中的白色）块上时，虽然我可以看到dragenter和dragleave事件触发，但出于某种原因，drop事件不会触发目标元素上的drop事件侦听器。有什么想法吗？

您还没有定义

dragover

事件。如果你这样做了，效果很好。只需使用与

绘图机相同的功能，或定义一个简单的功能：

function handleDragOver(e) {
    e.preventDefault();
}

....

col.addEventListener('dragover', handleDragEnter, false);

一旦你这样做了，它就会下降。您可以看到它在此处（或在此基础上）工作：


功能模块行车启动（ev）{
控制台日志（ev.target.id）；
ev.dataTransfer.setData（“文本”，ev.target.id）；
}
函数handleDrop（e）{
//此/e.target是当前目标元素。
e、 预防默认值（）；
console.log（'--'+e.target.id）；
}
功能手柄输入（e）{
//此/e.target是当前悬停目标。
e、 预防默认值（）；
this.classList.add（'over'）；
}
功能手柄（e）{
//此/e.target是源节点。
[]forEach.call（列，函数（列）{
col.classList.remove（'over'）；
});
}
功能手柄（e）{
this.classList.remove（'over'）；//this/e.target是上一个目标元素。
}
//新功能！
功能手柄（e）{
e、 预防默认值（）；
}
var cols=document.querySelectorAll（'.target'）；
[]forEach.call（列，函数（列）{
col.addEventListener（'dragenter'，handleDragEnter，false）；
col.addEventListener（'dragleave'，handleDragLeave，false）；
col.addEventListener（'Dragver'，handleDragOver，false）；
col.addEventListener（'drop'，handleDrop，false）；
});
var mods=document.querySelectorAll（'.module'）；
[]forEach.call（mods，function（mod）{
mod.addEventListener（'dragstart'，moduleDragStart，false）；
//将绘图移到这里，因为它应用于mod而不是col
mod.addEventListener（'dragend'，handleDragEnd，false）；
});
html，正文{高度：100%；边距：0px；填充：0px；}
.模块{
高度：50px；
宽度：50px；
背景：红色；
浮动：左；
利润率：10px；
}
.target{浮点：左；高度：100px；宽度：100px；背景：白色；边距：20px；边框：1px实心；}
.目标，完毕{
边框：2个虚线#000；
}
#内容块{
宽度：100%；
身高：100%；
}
#固定宽度{
宽度：300px；
浮动：左；
背景：蓝色；
身高：100%；
}
#最后{
背景：绿色；
最小宽度：1000px；
宽度：100%；
身高：100%；
}
#包装纸{
溢出：滚动；
身高：100%；
宽度：100%；
浮动：左；
}
#contentHeader{
宽度：100%；
高度：75px；
背景：橙色；
填充：10px；
}
#标志块{
高度：75px；
背景：黄色；
填充：10px；
}
#用户块{
高度：75px；
背景：白色；
填充：10px；
}
#模块块{
背景：黄色；
填充：10px；
}

标志块
标志块
模块块

内容头
注意，我将
dragend
事件从col移动到MOD。非常感谢您的及时帮助-我正在兜圈子！：P
function handleDragOver(e) {
    e.preventDefault();
}

....

col.addEventListener('dragover', handleDragEnter, false);