Question

尽管在线浏览教程以了解原生HTML5拖放，但我无法理解为什么'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>

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

1 个答案: