禁止将图像从桌面拖动到 html

Question

我试图实现一个简单的 HTML5 拖放图像上传器，一切都运行良好。我在 html 中有一个小 div，带有一个简单的 js 事件处理程序，看起来像这样

$('#uploader').on('dragover', function(e){
  ...
}).on('dragenter', function(e){
  ...
}).on('dragleave', function(e){
  ...
}).on('drop', function(e){
  ...
})

唯一的小问题是，如果一个人错过了那个 div 并且不小心将他的图像丢到了它之外，浏览器会触发它的默认事件（在同一个选项卡中打开图像），这不是很好。

我试图通过这样做来禁用它

$(elem).on('drop', function(e){
    if (e.originalEvent.preventDefault) e.originalEvent.preventDefault();
    if (e.originalEvent.stopPropagation) e.originalEvent.stopPropagation();
    return false;
})

我尝试了不同的元素，如文档、正文、另一个父 div，但如果该人缺少上传者 div，浏览器仍会在另一个页面中打开图像。我还尝试在 HTML 标记中的元素上添加 droppable = 'false'，但结果相同。

有没有办法防止这种行为？

Answer 1

尝试阻止拖动事件

$(document).on('dragover drop', function(e){
  return false;
});