为什么'drop'事件不会在此网页上触发？

Question

尽管通过在线教程来了解原生HTML5 drag'n'drop我不明白为什么'drop'事件不会为我的基本html页面启动。

小提琴是在这里 - https://jsfiddle.net/carlv/0yeuce3u/

代码如下。 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> 

和JavaScript来处理事件如下：

function moduleDragStart(ev) { 
    console.log(ev.target.id); 
    ev.dataTransfer.setData("text", ev.target.id); 
} 


function handleDrop(e) { 
    e.preventDefault(); 
    console.log('drop onto --'+e.target.id); 
} 

function handleDragEnter(e) { 
    console.log('target dragenter ='+e.target.id); 
    e.preventDefault(); 
    this.classList.add('over'); 
} 

function handleDragEnd(e) { 


    [].forEach.call(cols, function (col) { 
    col.classList.remove('over'); 
    }); 
} 

function handleDragLeave(e) { 
    this.classList.remove('over'); 
} 

var cols = document.querySelectorAll('.target'); 
[].forEach.call(cols, function(col) { 
    col.addEventListener('dragenter', handleDragEnter, false); 
    col.addEventListener('dragleave', handleDragLeave, false); 
    col.addEventListener('dragend', handleDragEnd, false); 
    col.addEventListener('drop', handleDrop, false); 
}); 

var mods = document.querySelectorAll('.module'); 
[].forEach.call(mods, function(mod){ 
    mod.addEventListener('dragstart',moduleDragStart,false); 

}); 

当我试图将一个模块块（在小提琴红色）拖动到目标（在小提琴白色）块，而我可以看到dragenter和dragleave事件触发，出于某种原因drop事件不会触发目标元素上的drop事件侦听器。有任何想法吗 ？

Answer 1

您尚未定义dragover事件。如果你这样做，它可以正常工作。如您使用的dragenter只需使用相同的功能或定义一个简单的一个：

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

.... 

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

一旦你做到这一点，它滴罚款。你可以看到它在这里工作（或在此JSFiddle）：

function moduleDragStart(ev) { 
 
    console.log(ev.target.id); 
 
    ev.dataTransfer.setData("text", ev.target.id); 
 
} 
 

 
function handleDrop(e) { 
 
    // this/e.target is current target element. 
 
    e.preventDefault(); 
 
    console.log('--'+e.target.id); 
 
} 
 

 
function handleDragEnter(e) { 
 
    // this/e.target is the current hover target. 
 
    e.preventDefault(); 
 
    this.classList.add('over'); 
 
} 
 

 
function handleDragEnd(e) { 
 
    // this/e.target is the source node. 
 
    [].forEach.call(cols, function (col) { 
 
    col.classList.remove('over'); 
 
    }); 
 
} 
 

 
function handleDragLeave(e) { 
 
    this.classList.remove('over'); // this/e.target is previous target element. 
 
} 
 

 
// NEW FUNCTION! 
 
function handleDragOver(e) { 
 
    e.preventDefault(); 
 
} 
 

 
var cols = document.querySelectorAll('.target'); 
 
[].forEach.call(cols, function(col) { 
 
    col.addEventListener('dragenter', handleDragEnter, false); 
 
    col.addEventListener('dragleave', handleDragLeave, false); 
 
    col.addEventListener('dragover', handleDragOver, false); 
 
    col.addEventListener('drop', handleDrop, false); 
 
}); 
 

 
var mods = document.querySelectorAll('.module'); 
 
[].forEach.call(mods, function(mod){ 
 
    mod.addEventListener('dragstart',moduleDragStart,false); 
 
    // moved the dragend here, as it's applied to mod and not to col 
 
    mod.addEventListener('dragend', handleDragEnd, false); 
 
});

html,body { height: 100%; margin: 0px; padding: 0px; } 
 
.module { 
 
    height:50px; 
 
    width:50px; 
 
    background:red; 
 
    float:left; 
 
    margin:10px; 
 
} 
 
.target { float:left;height:100px; width:100px; background:white;margin:20px;border:1px solid;} 
 
.target.over { 
 
    border: 2px dashed #000; 
 
} 
 
#contentBlock { 
 
    width:100%; 
 
    height:100%; 
 
} 
 
#fixedWidth{ 
 
    width: 300px; 
 
    float: left; 
 
    background: blue; 
 
    height:100%; 
 
} 
 
#theRest{ 
 
    background: green; 
 
    min-width:1000px; 
 
    width:100%; 
 
    height:100%; 
 
} 
 
#wrapper { 
 
    overflow:scroll; 
 
    height:100%; 
 
    width:100%; 
 
    float:left; 
 
} 
 

 
#contentHeader { 
 
    width:100%; 
 
    height:75px; 
 
    background: orange; 
 
    padding: 10px; 
 
} 
 

 
#logoBlock { 
 
    height:75px; 
 
    background: yellow; 
 
    padding: 10px; 
 
} 
 

 
#userBlock { 
 
    height:75px; 
 
    background: white; 
 
    padding: 10px; 
 
} 
 

 
#modulesBlock { 
 
    background: yellow; 
 
    padding: 10px; 
 
}

<div id="wrapper"> 
 
    <div id="fixedWidth"> 
 
    <div id="logoBlock">logoblock</div> 
 
    <div id="userBlock">logoblock</div> 
 
    <div id="modulesBlock"> 
 
     <p>modulesBlock</p> 
 
     <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="contentHeader">content header</div> 
 
    <div id="contentBlock"> 
 

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

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