我正在尝试为网络应用实施拖动上传输入。检测拖动开始和结束以及适当的放置目标样式可以完美地工作,但是只要我将图像文件放在目标上,它就会在浏览器中打开。我知道在SO上经常会问这个问题,但我无法在任何地方找到解决方案。
我看到的是:dragenter
,dragstart
和dragend
的听众正确触发,而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;
};
答案 0 :(得分:0)
当我将相同的事件应用到body
时意外发现。似乎需要在文档正文中使用通常的dragover
和preventDefault
内容的stopPropagation
监听器:
app.on('dragover', document.body, function(event) {
event.preventDefault();
event.stopPropagation();
return false;
});
上帝,我非常讨厌这个API ......