为啥这个网页上没有触发“drop”事件？

Posted 2023-05-08

【中文标题】为啥这个网页上没有触发“drop”事件？

【英文标题】：Why does the 'drop' event not fire on this web page?为什么这个网页上没有触发“drop”事件？

【发布时间】：2015-10-10 06:57:33

【问题描述】：

尽管浏览了在线教程以了解原生 html5 拖放，但我无法理解为什么我的基本 html 页面不会触发 'drop' 事件。

这里有一个小提琴 - 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 事件侦听器元素。有什么想法吗？

【参考方案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>

【讨论】：

请注意，我将 dragend 事件从 col 移动到 mod

非常感谢您的及时帮助 - 我在兜圈子！ :P