Dropzone图像重新排序

Dropzone images reordering

本文关键字：排序 新排序 图像 Dropzone      更新时间：2023-09-26

我使用dropzone通过拖放将多张图片上传到我的服务器。首先我选择我所有的照片，然后当我想上传的时候，我按下按钮，所有的文件就上传了。

我想改变他们上传的顺序，我正在使用这个提示是否有一种方法可以在dropzone.js实例中对预览元素进行拖放重新排序?我可以用鼠标拖动来改变顺序。

问题是，当我上传的图片不是按照我已经更改的顺序上传的，而是按照我最初将它们放在dropzone中的顺序上传的。

我的dropzone被配置为如下

autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 3,
clickable: ".add",
previewsContainer: "#previews", 
maxFiles: 5,

Html将看起来像这样:

<div id="imageUpload" class="dropzone mt-2"></div>

并在js

中添加以下代码
$(".dropzone").sortable({
    items:'.dz-preview',
    cursor: 'grab',
    opacity: 0.5,
    containment: '.dropzone',
    distance: 20,
    tolerance: 'pointer',
    stop: function () {
      var queue = myDropzone.getAcceptedFiles();
      newQueue = [];
      $('#imageUpload .dz-preview .dz-filename [data-dz-name]').each(function (count, el) {           
            var name = el.innerHTML;
            queue.forEach(function(file) {
                if (file.name === name) {
                    newQueue.push(file);
                }
            });
      });
      myDropzone.files = newQueue;
    }
});

相关文章：