Jak przenieść odsyłacz dz-remove Dropzone.js

Question

Na poniższym obrazku, jak widać, chciałbym móc zmienić pozycję linku usuń plik na zewnętrzną stronę obszaru div zawartości.

Próbowałem z niestandardowym szablonem bez powodzenia.

Pytanie Jak mogę mieć przycisk usuń plik z boku mojego zawartości obszaru div? Zamiast poniższego obrazu.

Chcę tylko, aby móc mieć odnośnik Usuń obraz w innym obszarze

<div id="content"> 

    <div id="my-dropzone" class="dropzone"> 
     <span class="">Content Div Area</span> 
     <div class="dz-message"> 
      <h3>Drop files here</h3> or <strong>click</strong> to upload 
     </div> 
    </div> 

    <div class="dropzone_preview" id="dz-preview"> 
     <div class="dropzone_details"> 
      <img data-dz-thumbnail /> 
     </div> 
     <a id="dz-remove" href="javascript:undefined;" data-dz-remove>Remove <-- here</a> 
    </div> 

</div> 

<script src="<?php echo base_url(); ?>vendor/jquery/jquery.min.js"></script> 
<script src="<?php echo base_url(); ?>vendor/dropzone/dropzone.min.js"></script> 

<script> 
Dropzone.autoDiscover = false; 
var myDropzone = new Dropzone("#my-dropzone", { 

    url: "<?php echo site_url("images/upload") ?>", 
    acceptedFiles: "image/*", 
    addRemoveLinks: true, 
    thumbnailWidth: null, 
    thumbnailHeight: null, 
    addRemoveLinks: true, 
    previewTemplate: document.getElementById('dz-preview').innerHTML, 
    removedfile: function(file) { 

    var name = file.name; 

    $.ajax({ 
     type: "post", 
     url: "<?php echo site_url("images/remove") ?>", 
     data: { file: name }, 
     dataType: 'html' 
    }); 

    var previewElement; 
    return (previewElement = file.previewElement) != null ? (previewElement.parentNode.removeChild(file.previewElement)) : (void 0); 
    }, 
    init: function() { 
     this.on("thumbnail", function(file, dataUrl) { 
      $('.dz-image').last().find('img').attr({width: '100%', height: '100%'}); 
     }), 
     this.on("success", function(file) { 
      $('.dz-image').css({"width":"100%", "height":"auto"}); 
     }); 
     var me = this; 
     $.get("<?php echo site_url("images/list_files") ?>", function(data) { 
      // if any files already in server show all here 
      if (data.length > 0) { 
       $.each(data, function(key, value) { 
       var mockFile = value; 
       me.emit("addedfile", mockFile); 
       me.emit("thumbnail", mockFile, "<?php echo base_url(); ?>uploads/" + value.name); 
       me.emit("complete", mockFile); 
       }); 
      } 
     }); 
    } 
}); 
</script> 

Answer 1

nie jestem w 100% pewien, czy rozumiem zostanie poprawnie , ale czy previewTemplate nie rozwiąże problemu?

Zobacz http://www.dropzonejs.com/#config-previewTemplate

zrobić coś takiego: HTML:

<div id="preview-template" class="dz-preview dz-file-preview"> 
    <div class="dz-details"> 
    <div class="dz-filename"><span data-dz-name></span></div> 
    <div class="dz-size" data-dz-size></div> 
    <img data-dz-thumbnail /> 
    </div> 
    <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div> 
    <div class="dz-success-mark"><span>✔</span></div> 
    <div class="dz-error-mark"><span>✘</span></div> 
    <div class="dz-error-message"><span data-dz-errormessage></span></div> 
<div><img src="removebutton.png" alt="Click me to remove the file." data-dz-remove /></div> 
</div> 
<div id="content"> 
<div id="my-dropzone" class="dropzone"> 
<div class="dz-message"> 
<h3>Drop files here</h3> or <strong>click</strong> to upload 
</div> 
</div> 
</div> 

JS:

<script> 
Dropzone.autoDiscover = false; 
var myDropzone = new Dropzone("#my-dropzone", { 
..., 
previewTemplate: document.getElementById('preview-template').innerHTML 
}); 
</script> 

Następnie można modyfikować z CSS gdzie wyświetli przycisk usuwania.