有没有办法在dropzone.js实例中对预览元素进行拖放重新排序？

Question

我在网页上有一个dropzone.js实例,其中包含以下选项:

autoProcessQueue:false
uploadMultiple:true
parallelUploads:20
maxFiles:20

它以编程方式实例化,因为它是更大形式的一部分.在提交表单时,我已经完成了处理队列的操作.

我的目标是让我的用户能够使用dropzone管理项目的图像,所以我希望他们能够通过拖放dropzone.js图像预览来重新排序图像.有没有办法做到这一点？我已经尝试过使用jquery-ui的可排序但它似乎与dropzone.js不太搭配.

Answer 1

我现在使用jquery-ui的可排序工作了.诀窍是确保在sortable中使用'items'选项只选择dz-preview元素,因为dropzone.js在主容器中有dz-message元素和dz-preview元素.以下是我的代码的外观:

HTML:

<div id="image-dropzone" class="dropzone square">

剧本:

$(function() {
    $("#image-dropzone").sortable({
        items:'.dz-preview',
        cursor: 'move',
        opacity: 0.5,
        containment: '#image-dropzone',
        distance: 20,
        tolerance: 'pointer'
    });
})

Answer 2

除了 ralbatross 的代码之外，您还需要设置 dropzone 的文件队列的顺序。

就像是：

$("#uploadzone").sortable({
    items: '.dz-preview',
    cursor: 'move',
    opacity: 0.5,
    containment: '#uploadzone',
    distance: 20,
    tolerance: 'pointer',
    stop: function () {

        var queue = uploadzone.files;
        $('#uploadzone .dz-preview .dz-filename [data-dz-name]').each(function (count, el) {           
            var name = el.getAttribute('data-name');
            queue.forEach(function(file) {
               if (file.name === name) {
                    newQueue.push(file);
               }
            });
        });

        uploadzone.files = newQueue;

    }
});

请记住，文件是异步处理的，我保留一个哈希表以供文件完成时参考，并在最后保存订单。

它不适用于重复的文件名