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

I've got it working now using jquery-ui's sortable. The trick was to make sure to use the 'items' option in sortable to pick only the dz-preview elements, because dropzone.js has the dz-message element along with the dz-preview elements in the main container. Here's how my code looks:

The HTML:

The script:

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