Is there a way to do drag-and-drop re-ordering of the preview elements in a dropzone.js instance?

Question

I have a dropzone.js instance on a web page with the following options:

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

Answer 1

Here's another option without any plugins. On the success event callback, you can do some manual sorting:

   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);
    });