禁用将文件系统映像拖动到浏览器中.

Question

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

我想知道是否有办法防止这种行为？我已经在ondrop事件上尝试了stopPropagation/preventDefault,但有一点工作,但是留下了"drop"光标,给人的印象是图像可以放在页面的任何地方.

理想情况下,您只能在要删除图像的指定区域看到"拖放"光标.

Answer 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/ - 仅允许删除矩形.