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

Question

Despite trawling the online tutorials to understand native HTML5 drag'n'drop I cannot understand why the 'drop' event wont fire for my basic html page.

A fiddle is here - https://jsfiddle.net/carlv/0yeuce3u/

Code is as follows. 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>

and javascript to handle events is as follows:

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);

});

When I try to drag a module block (red in fiddle) onto a target (white in fiddle) block, whilst I can see the dragenter and dragleave events firing, for some reason drop event doesnt fire the drop event listener on target element. Any ideas ?

Answer 1

You haven't defined the dragover event. If you do it, it works fine. Just use the same function as you use for the dragenter or define a simple one:

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

....

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

Once you do that, it drops fine. You can see it working here (or on this 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>