禁止将文件系统图像拖入浏览器。答案

【问题标题】：Disable dragging of a file system image into a browser.禁止将文件系统图像拖入浏览器。
【发布时间】：2011-09-13 00:34:26
【问题描述】：

我正在试验 HTML5 文件 API。但是，我注意到浏览器具有默认行为，如果您将图像拖到浏览器中，它们会显示图像。但是，如果您的目标是上传图像而不是查看图像，这可能会很烦人。

我想知道是否有办法防止这种行为？我已经在 ondrop 事件上尝试了 stopPropagation / preventDefault ，这在一定程度上起作用，但是将“放置”光标留在原处，给人的印象是图像可以放置在页面上的任何位置。

理想情况下，您只会在要放置图像的指定区域上看到“放置”光标。

【问题讨论】：

标签： javascript html drag-and-drop fileapi

【解决方案1】：

dataTransfer 对象具有 dropEffect 和 effectAllowed 属性。不完全确定它们之间有什么区别，但将两者都设置为“无”应该会有所帮助。

$(document).bind({
   dragenter: function (e) {
      e.stopPropagation();
      e.preventDefault();
      var dt = e.originalEvent.dataTransfer;
     dt.effectAllowed = dt.dropEffect = 'none';
   },
   dragover: function (e) {
      e.stopPropagation();
      e.preventDefault();
      var dt = e.originalEvent.dataTransfer;
      dt.effectAllowed = dt.dropEffect = 'none';
   }
});

参见http://jsfiddle.net/andreymir/H3RR7/embedded/result/ - 只允许拖放到矩形。

【讨论】：

【解决方案2】：

也许这就是您要找的东西？这是我自己设计的。

http://rightandrong.info/html5upload/Upload.html

【讨论】：

顺便说一下，这并没有解决光标问题 - 看看 a.js 和调用的事件。