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

Posted 2023-05-08

【中文标题】有没有办法对 dropzone.js 实例中的预览元素进行拖放重新排序？

【英文标题】：Is there a way to do drag-and-drop re-ordering of the preview elements in a dropzone.js instance?

【发布时间】：2014-05-05 04:39:16

【问题描述】：

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

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

它是以编程方式实例化的，因为它是更大表单的一部分。提交表单时，我已经安装它来处理队列。

我的目标是让我的用户能够使用 dropzone 来管理项目的图像，因此我希望他们能够通过拖放 dropzone.js 图像预览来重新排序图像。有没有好的方法来做到这一点？我尝试过使用 jquery-ui 的 sortable，但它似乎与 dropzone.js 不兼容。

【参考方案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'
    );
)

【讨论】：

我还有重新排列图像并将其存储在服务器上的功能，我怎样才能获得新的文件顺序？

真的很好，但是请问您如何在排序成功后创建回调函数？

我还添加了这个：$dropzone.sortable(start: function(e, ui) $dropzone.removeClass('dz-clickable'); ui.item.removeClass('dz-success') , stop: function() $dropzone.addClass('dz-clickable') , update: function(e, ui) console.log('Item reordered!', ui.item); – 删除 dz-clickable 以在拖动后禁用打开文件对话框。删除 dz-success 因为每次拖动后都会播放动画。此外，我在拖动时遇到项目消失的问题 - jquery-ui 的 sortable.js 中存在错误 - 在第 1008 行将 this.document[0] 替换为 this.document[0].body

@LevLukomsky 什么是“$dropzone”？这并不能解决任何问题。

@MikeWiesenhart 这可能值得一个单独的 SO 问题，但基本上我必须在 dropzone 项目中维护一些额外的元数据，然后在 POST 以及响应中发送它来自 POST

【参考方案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;

    
);

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

它不适用于重复的文件名

【讨论】：

感谢 sn-p，为我工作。但是，在我的 dropzone 构建中，文件名存储在 span 元素中，所以我写了 var name = el.innerHTML; 而不是 var name = el.getAttribute('data-name');

与 Atan 相同的修复，以及在尝试向其推送任何内容之前定义 newQueue：var queue = uploadzone.files, newQueue = [];

有趣。今天的 Dropzone (5.5) 一定不需要这个奇怪的队列黑客，因为它似乎可以直接与 .sortable 一起工作。

@IncredibleHat 我已经很长时间没有使用它了，但这可能是因为您的 parallelUploads 为 1，或者您很幸运所有文件都按照它们的排序顺序完成第二个是大文件，第一个是小文件。

【参考方案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);
    );

【参考方案4】：

你可以使用 SortableJS (https://github.com/SortableJS/Sortable)

new Sortable(document.getElementById('dropzone'), 
  draggable: '.dz-preview'