javascript - 为什么 'drop' 事件没有在此网页上触发？

Question

尽管浏览了在线教程以了解原生 HTML5 拖放，但我还是不明白为什么我的基本 html 页面不会触发“拖放”事件。

fiddle 在这里 - 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);

});

当我尝试将模块 block ( fiddle 中的红色)拖到目标( fiddle 中的白色) block 上时，虽然我可以看到 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>