javascript - dropzone.js 删除点击上传

Question

我正在为项目使用 dropzone.js 插件。我想知道是否有办法停止 click 事件(您可以在其中选择文件)但保留拖放功能。

拖放操作在整个页面上进行，当您仅选择文本时，点击会变得烦人。

我已经尝试过

$('.dropzone')[0].removeEventListener('click', myDropzone.listeners[1].events.click);

和

$(".dz-hidden-input").prop("disabled",true);

但是这些禁用了我仍然需要工作的拖放功能。有什么想法吗？

Answer 1

您可以设置 clickable初始化 Dropzone 时将选项设置为 false。根据文档

If true, the dropzone element itself will be clickable, if false nothing will be clickable.

You can also pass an HTML element, a CSS selector (for multiple elements) or an array of those. In that case, all of those elements will trigger an upload when clicked.

请参阅下面的演示

// Dropzone class:
$("div#myDZ").dropzone({
  url: "/file/post",
  clickable: false
});

#myDZ {
  padding: 10px;
  width: 100%;
  height: 100vh;
  border: 2px inset #c8c8c8;
  font-family: Calibri;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/min/dropzone.min.js"></script>

<div id="myDZ">
  Drag / Drop your files here . Click is <kbd>DISABLED</kbd> and wont work
</div>