悬浮窗JS预览元素选项

JS代码初始化

Dropzone.autoDiscover = false; 
 
$(".js-dropzone").dropzone({ 
 
    url: 'upload_files.php', 
 
    addRemoveLinks: true, 
 
    previewTemplate: $('.form_dropzone_preview').html() 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.css" rel="stylesheet"/> 
 
<!-- first --> 
 

 
<div class="form_dropzone js-dropzone></div> 
 
    <div class=" dropzone-previews js-previews-1 "></div> 
 

 
    <!-- second --> 
 
    <div class="form_dropzone js-dropzone></div> 
 
<div class="dropzone-previews js-previews-2"></div>

如何设置previewsContainer.js-previews-1的第一悬浮窗和.js-previews-2为第二？

来源

2017-05-11 slikNET

你不能......你需要两个选择 –

的[文档]（http://www.dropzonejs.com/#configuration-options ）说'可以是简单的HTMLElement或CSS选择器'，因此您需要单独定义每个dropzone，而不是像现在一样对两个应用相同的设置。 –

是的@RoryMcCrossan正在说 –

function initDropzone(id, previewsContainer) { 
    new Dropzone(
    id, //id of drop zone element 
    { 
     url: 'upload_files.php', 
     previewTemplate: $('.form_dropzone_preview').html(), 
     previewsContainer: previewsContainer 
     // other options 
    } 
} 

(function($) { 
    "use strict"; 

    // Dropzone 
    Dropzone.autoDiscover = false; 
    for (var i = 1; i <= 2; i++){ 
     initDropzone('#dropzone_'+i,'#dropzone_previews_'+i); 
    } 

}(jQuery));

HTML

first 
<div class="form_dropzone" id="dropzone_1"></div> 
<div class="dropzone-previews" id="dropzone_previews_1"></div> 

second 
<div class="form_dropzone" id="dropzone_2"></div> 
<div class="dropzone-previews" id="dropzone_previews_2"></div>

来源

2017-05-11 17:39:45 slikNET

悬浮窗JS预览元素选项

回答

相关问题