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

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

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

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

解决方法

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/ – 仅允许拖放到矩形.