有没有办法在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;

    }
});

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

它不适用于重复的文件名

Answer 3

这是没有任何插件的另一种选择。在成功事件回调中，您可以进行一些手动排序：

   var rows = $('#dropzoneForm').children('.dz-image-preview').get();

    rows.sort(function (row1, row2) {
        var Row1 = $(row1).children('.preview').find('img').attr('alt');   
        var Row2 = $(row2).children('.preview').find('img').attr('alt');
        if (Row1 < Row2) {
            return -1;
        }

        if (Row1 > Row2) {
            return 1;
        }
        return 0;
    });


    $.each(rows, function (index, row) {
        $('#dropzoneForm').append(row);
    });