Question

我在我的ruby on rails项目中使用Dropzone.js，我要求将html body作为droppable，这样我就可以将文件放到页面的任何位置，我在创建新故事时在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文件中使用了选项。

任何人都可以帮助如何使我的整个页面成为可放置的

提前致谢

Answer 1

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

我用过这个，效果很好。在整页中使用dropzone是一种愚蠢的做法，但是你想一点，你可以轻松地在一个放置区域中转换他的按钮或按钮的背景。

<!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>

最后，您可以拥有整页dropzone，特定的dropzone和发送文件的按钮。

Answer 2

当您以编程方式初始化Dropzone时，您可以将drop-area的选择器作为第一个参数：

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代码。在那里，您可以找到一些配置和回调函数的好例子。

如何使用dropzone js将整个页面体作为droppable使用

2 个答案: