如何使用 dropzone js 将整个页面正文用作可放置答案

【问题标题】：how to use whole page body as droppable using dropzone js如何使用 dropzone js 将整个页面正文用作可放置
【发布时间】：2015-01-10 09:20:20
【问题描述】：

我在我的 ruby on rails 项目中使用 Dropzone.js，我需要将 html 正文作为可放置的，因此我可以将文件拖放到页面上的任何位置，我在 JIRA 上看到了这个，同时创建了新的故事，确实做到了我想。以下是我的代码

in js file I did the following 
------------------------------------------------

Dropzone.options.documentDropzone = {
autoProcessQueue: false,
init: function() {
myDropzone = this;

var submitButton = document.querySelector("#buttondropzone")

submitButton.addEventListener("click", function() {
   myDropzone.hiddenFileInput.click();
});

this.on("addedfile", function(file) { 
  $("#smallModal").modal('show');
});

this.on("sending", function(file, xhr, formData){
    if ($("#docName").val() == ""){
      this.removeAllFiles(true);
    }else {
     //formData.append('name', $("#docName").val());
    }

});
this.on("success",function(file,data){
  this.removeAllFiles(true);
});

}


my form looks like the following 
---------------------------------------
 = simple_form_for @object , url: someurl , :html => {id: 'document-dropzone', class: 'dropzone', multipart: true} do |f| 
    = f.input :document ,:as => :file  , :label => false , :input_html => {class: "hide"}

我已经检查了以下链接 Make the whole body a dropzone ，但他们直接将 dropzone 配置为 document.body 但在我的情况下，我为表单配置了 dropzone 并在 js 文件中使用了选项。

谁能帮助我将整个页面设置为可放置

提前致谢

【问题讨论】：

标签： jquery ruby-on-rails-4 dropzone.js

【解决方案1】：

这将对您有所帮助：https://github.com/enyo/dropzone/wiki/Make-the-whole-body-a-dropzone

我用过这个，效果很好。在整页中使用 dropzone 是一个教程，但是您稍微想一下，您可以轻松地在 drop zone 中转换他的按钮或按钮的背景。

<!doctype html>

<link rel="stylesheet" href="dropzone.css" />
<script src="dropzone.js"></script>


<!--
Don't forget to give this container the dropzone-previews class 
so the previews are formatted correctly.
 -->
<div id="previews" class="dropzone-previews"></div>


<button id="clickable">Click me to select files</button>

<script>
  new Dropzone(document.body, { // Make the whole body a dropzone
    url: "/upload/url", // Set the url
    previewsContainer: "#previews", // Define the container to display the previews
    clickable: "#clickable" // Define the element that should be used as click trigger to select files.
  });
</script>

最后，您可以拥有一个完整的页面放置区、一个特定的放置区和一个发送文件的按钮。

【讨论】：

【解决方案2】：

当您以编程方式初始化 Dropzone 时，您可以将放置区域的选择器作为第一个参数：

Dropzone.autoDiscover = false;

$(document).ready(function () {

  var myDropzone = new Dropzone(document.body, // Make the whole body a dropzone
    { 
        url: $(val).attr("action")
        // more options if needed

    }
  );
}

查看bootstrap example page 中的js 代码。在那里你可以找到一些配置和回调函数的好例子。

【讨论】：

您在我的问题中发布的 url 中向我展示了相同的代码（使整个身体成为 dropzone），但这不是我的要求。你看过 JIRA 网站他们是怎么做 dropzone 的吗？我发布了一些我已经配置的代码，如果您知道，请使用我的代码给我正确的回复
在我的页面中，我给的空间非常少（比如 300 x 300 方形框）我想用那个框进行点击和上传，但是当我尝试拖动时（当鼠标输入文件时）我的dropzone 应该响应
你的意思是整个body应该是dropzone，但是只有300x300的方格看起来应该是dropzone？
是的，当我在页面上（页面上的任何位置）拖动一些东西时，我的 300 x 300 框应该响应，你知道吗？
这不是你想要的，但你可以试试下面的东西。将 dropzone 附加到 document.body 并使用 css-class .drag-highlight 定义您想要的 300x300 框。当您将文件拖到正文上时，dropzone.js 应将 .dz-drag-hover 添加到正文中。当您添加 css 规则 .dz-drag-hover .drag-highlight{background-color: red} 时，您的 300x300 正方形应在文件被拖动到文档上时显示为红色...