HTML5 DragNDrop - Drop事件永远不会触发

时间:2016-08-12 10:33:50

标签: javascript html5 javascript-events drag-and-drop

我正在尝试为网络应用实施拖动上传输入。检测拖动开始和结束以及适当的放置目标样式可以完美地工作,但是只要我将图像文件放在目标上,它就会在浏览器中打开。我知道在SO上经常会问这个问题,但我无法在任何地方找到解决方案。

我看到的是:dragenterdragstartdragend的听众正确触发,而drop则没有。请参阅以下代码:

(注意:app对象只是一个简单的自定义抽象对象,没有什么特别之处。app.on方法调用addEventListener并附加包含在try-catch块。)


附加活动

app.on('drag dragover dragstart', app.elements.pictureDropArea, app.events.startedDragging, true);
app.on('dragenter', app.elements.pictureDropArea, app.events.isDragging);
app.on('dragleave dragend', app.elements.pictureDropArea, app.events.stoppedDragging);
app.on('drop', app.elements.pictureDropArea, app.events.isDropped);


个别活动

app.events.startedDragging = function(event) {
  event.preventDefault();
  event.stopPropagation();
  return false;
};

app.events.isDragging = function(event) {
  event.preventDefault();
  event.stopPropagation();
  app.elements.pictureDropArea.classList.add('dragged-over');
  return false;
};

app.events.stoppedDragging = function(event) {
  event.preventDefault();
  event.stopPropagation();
  app.elements.pictureDropArea.classList.remove('dragged-over');
  return false;
};

app.events.isDropped = function(event) {
  event.preventDefault();
  event.stopPropagation();
  console.log('drop event fired.');

  var file = event.dataTransfer.files[ 0 ];

  console.log(file);
  return false;
};

1 个答案:

答案 0 :(得分:0)

当我将相同的事件应用到body时意外发现。似乎需要在文档正文中使用通常的dragoverpreventDefault内容的stopPropagation监听器:

app.on('dragover', document.body, function(event) {
  event.preventDefault();
  event.stopPropagation();
  return false;
});

上帝,我非常讨厌这个API ......