如何在Dropzone.js中禁用拖放功能？

嘿，我注意到你已经搞定了「有文件时禁用点击上传」的逻辑，但拖放功能还没被限制对吧？其实Dropzone的clickable配置只控制点击触发上传，拖放是通过浏览器原生拖放事件处理的，得额外针对这些事件做处理才行。

我给你整理了一套适配你现有代码的解决方案，既能在有文件时禁用拖放和点击，又能在移除文件后恢复正常功能：

第一步：添加拖放事件控制工具函数 #

先写几个函数用来阻止或恢复拖放事件的默认行为：

const dropzoneElement = document.querySelector(".dropzone");

// 阻止拖放事件的核心函数
function preventDragEvents(e) {
  e.preventDefault();
  e.stopPropagation();
}

// 禁用拖放功能
function disableDropzoneDrag() {
  dropzoneElement.addEventListener('dragover', preventDragEvents);
  dropzoneElement.addEventListener('dragenter', preventDragEvents);
  dropzoneElement.addEventListener('drop', preventDragEvents);
}

// 恢复拖放功能
function enableDropzoneDrag() {
  dropzoneElement.removeEventListener('dragover', preventDragEvents);
  dropzoneElement.removeEventListener('dragenter', preventDragEvents);
  dropzoneElement.removeEventListener('drop', preventDragEvents);
}

第二步：初始化时同步禁用拖放 #

因为你一开始就添加了占位文件，所以初始化完成后直接调用禁用函数，同时保持点击上传禁用：

// 你的原有初始化代码之后
var currentFile = { name: "Existing file" }
myDropzone.options.addedfile.call(myDropzone, currentFile)
myDropzone.options.thumbnail.call(
  myDropzone, currentFile, "https://placehold.co/1200x900",
)
// 新增：初始化时禁用拖放和点击
myDropzone.options.clickable = false;
disableDropzoneDrag();

第三步：修改accept函数，同步禁用拖放 #

还要在文件被成功添加时，同步禁用拖放功能，别忘了调用done()，否则Dropzone不会正常处理文件：

myDropzone.options.accept = function (file, done) {
  if (file.name !== "") {
    myDropzone.options.clickable = false;
    disableDropzoneDrag();
  }
  done(); // 必须调用这个函数，文件才会被正常添加到Dropzone中
}

第四步：监听文件移除事件，恢复上传功能 #

当用户移除文件后，要重新允许点击和拖放：

myDropzone.on('removedfile', function() {
  myDropzone.options.clickable = true;
  enableDropzoneDrag();
});

这样修改后，当Dropzone里有文件时，既不能点击选择文件，也不能拖放文件进来；移除文件后，又能恢复正常的上传功能啦。

内容来源于stack exchange