禁用文件拖动&如果没有文件输入，则放弃 [英] Disable File drag & drop if there isn't a file input

问题描述

我认为解决这个问题的办法就是把我盯在脸上，但我似乎无法找到它。

所以，我正在制作一个网站有一个小文件上传部分。上传部分将有一个地方上传不同的设备和设备的方向（即iPhone，iPad的，肖像和风景）的图像。我可以很容易地弄清楚如何实现拖放放在单独的设备图标上，但是如果用户错过放置区域，浏览器将只导航到他们系统上的那个图像。我如何禁用拖动&如果没有文件输入类型接收拖动的文件，请放下？

解决方案

本文档（用于jQuery文件上传插件）显示如何禁用浏览器的默认操作：
https://github.com/blueimp/jQuery-File-Upload/wiki/Drop-zone-effects

引用文档：

$ b

如果您想要允许特定的放置区域，但禁用文档上文件放置的默认浏览器操作，请添加以下JavaScript代码：

  $（document）.bind（'drop dragover'，function（e）{
 e。 preventDefault（）; 
}）; 
  

请注意，防止drop和 dragover事件需要禁用默认浏览器放置操作。

I think the solution to this is staring me in the face, but I can't seem to find it.

So, I'm making a site that has a small file upload section. The upload section will have a place to upload an image for different devices and device orientations (i.e. iPhone, iPad, portrait and landscape). I can easily figure out how to implement the drag & drop on the individual device icons, but if the user misses the drop area, the browser will just navigate to that image on their system. How do I disable drag & drop if there isn't a file input type to receive the dragged file?

解决方案

This document (documentation for a jQuery file upload plugin) shows how to disable the browser's default action: https://github.com/blueimp/jQuery-File-Upload/wiki/Drop-zone-effects

Quoting the document:

If you want to allow specific drop zones but disable the default browser action for file drops on the document, add the following JavaScript code:

$(document).bind('drop dragover', function (e) {
     e.preventDefault();
});

Note that preventing the default action for both the "drop" and "dragover" events is required to disable the default browser drop action.

这篇关于禁用文件拖动&如果没有文件输入，则放弃的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！