【问题标题】:drop EventListener doesn't work删除事件监听器不起作用
【发布时间】:2017-01-25 22:55:50
【问题描述】:

当我拖放文本时,没有任何反应。但是当我将事件更改为“dragenter”或“dragleave”时,相同的脚本会起作用。我错过了什么吗?

function handleDragDrop(e) {
  console.log("Something droped");
  dropStatus.innerHTML = "Something droped";
}

var dropZone = document.getElementById("dropZone");
var dropStatus = document.getElementById("dropStatus");


dropZone.addEventListener("drop", handleDragDrop);
.drop-zone {
  width: 300px;
  padding: 20px;
  border: 2px dashed #000;
}
<div id="dropZone" class="drop-zone">Drop Zone!</div>
<div id="dropStatus"></div>

<div class="" draggable="true">DRAG ME</div>

【问题讨论】:

    标签: javascript drag-and-drop draggable


    【解决方案1】:

    需要取消结束

    function handleDragDrop(e) {
      console.log("Something droped");
      dropStatus.innerHTML = "Something droped";
    }
    
    var dropZone = document.getElementById("dropZone");
    var dropStatus = document.getElementById("dropStatus");
    
    
    dropZone.addEventListener("drop", handleDragDrop);
    dropZone.addEventListener("dragover", function(e) {
      e.preventDefault();
      return false;
    });
    .drop-zone {
      width: 300px;
      padding: 20px;
      border: 2px dashed #000;
    }
    <div id="dropZone" class="drop-zone">Drop Zone!</div>
    <div id="dropStatus"></div>
    
    <div class="" draggable="true">DRAG ME</div>

    【讨论】:

      猜你喜欢
      • 2015-06-06
      • 2020-05-08
      • 2011-05-23
      • 1970-01-01
      • 1970-01-01
      • 2019-06-30
      相关资源
      最近更新 更多