Cách di chuyển liên kết dz-remove Dropzone.js

Question

Trên hình ảnh của tôi dưới đây vì bạn có thể thấy tôi muốn có thể thay đổi vị trí của liên kết xóa tệp sang bên ngoài vùng nội dung div.

Tôi đã thử với bit mẫu tùy chỉnh không may mắn.

Câu hỏi Làm cách nào để xóa nút tệp bên ngoài vùng nội dung div? Thay vì bên dưới hình ảnh.

Tôi chỉ muốn để có thể có liên kết hình ảnh loại bỏ trong lĩnh vực khác nhau

<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

Tôi không chắc chắn 100%, nếu tôi hiểu bạn một cách chính xác , nhưng không phải previewTemplate có khắc phục được sự cố của bạn không?

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

Bạn làm một cái gì đó như thế này: 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> 

Sau đó, bạn có thể sửa đổi với CSS nơi để hiển thị các nút gỡ bỏ.