文章/答案/技术大牛

发布

社区首页 >问答首页 >是否有办法对dropzone.js实例中的预览元素进行拖放重新排序？

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

Stack Overflow用户

提问于 2014-03-26 16:04:14

回答 4查看 17.9K关注 0票数 18

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

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

它是以编程方式实例化的，因为它是较大表单的一部分。在提交表单时，我已将其设置为处理队列。

我的目标是让我的用户能够使用下拉区域来管理项目的图像，所以我希望他们能够通过拖放dropzone.js图像预览来重新排序图像。有什么好办法吗？我尝试过使用jquery的可排序，但它似乎对dropzone.js不太好。

preview

drag-and-drop

dropzone.js

回答 4

Stack Overflow用户

回答已采纳

发布于 2014-03-26 16:46:59

现在，我已经使用jquery的可排序功能了。诀窍是确保使用排序中的“items”选项只选择dz预览元素，因为dropzone.js在主容器中有dz消息元素和dz预览元素。下面是我的代码：

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

票数 28

Stack Overflow用户

发布于 2016-03-31 13:33:19

除了来自信天翁的代码之外，您还需要设置下拉区域文件队列的顺序。

类似于：

$("#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;

    }
});

请记住，文件是处理异步的，我保留了一个哈希表，以便在文件完成时引用，并在文件末尾保存顺序。

它不适用于重复的文件名

票数 6

Stack Overflow用户

发布于 2021-03-16 16:00:35

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

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

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/22666735

复制

相似问题

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

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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