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

Posted 2023-05-08

【中文标题】禁止将图像从桌面拖动到 html

【英文标题】：Disable dragging images from desktop to html

【发布时间】：2014-03-13 04:43:13

【问题描述】：

我试图实现一个简单的 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'，但结果相同。

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

【问题讨论】：

***.com/a/6756680/2752041 的可能重复项。看看接受的答案，它可能会解决您的问题。

谢谢。它肯定是重复的（对此感到抱歉）。但穆萨的回答解决了问题，而且更短。

【参考方案1】：

尝试阻止拖动事件

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

【讨论】：

谢谢，它有效。奇怪的是，当我尝试“文档”和“正文”时，它不起作用。