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

Question

我在网页上有一个dropzone.js实例，具有以下选项：

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

它是较大形式的一部分，因此已通过编程方式实例化。我已将其组装起来，以便在提交表单时处理队列。

我的用户的目标是能够使用dropzone管理项目的图像，因此我希望他们能够通过拖放dropzone.js图像预览来对图像进行重新排序。有什么好方法吗？我已经尝试过使用jquery-ui的sortable，但是它似乎不能与dropzone.js配合使用。

Answer 1

我现在已经使用jquery-ui的sortable使其工作了。诀窍是确保在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'
    });
})