有没有办法在dropzone.js实例中拖放预览元素的重新排序？ [英] Is there a way to do drag-and-drop re-ordering of the preview elements in a dropzone.js instance?

问题描述

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

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

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

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

It is programmatically instantiated, as it is part of a larger form. I have it rigged up to process the queue when the form is submitted.

目标是让我的用户能够使用dropzone管理项目的图像，所以我希望他们能够重新排序图片通过拖放dropzone.js图像预览。有没有办法做到这一点？我试过使用jquery-ui的排序方式，但似乎并不适合使用dropzone.js。

The goal is for my users to be able to use the dropzone to manage images for an item, so I'd like them to be able to re-order the images by dragging and dropping the dropzone.js image previews. Is there a good way to do this? I've tried using jquery-ui's sortable but it doesn't seem to play nice with dropzone.js.

推荐答案

现在使用jquery-ui可排序它现在正在工作。诀窍是确保使用'items'选项来排序只选择dz-preview元素，因为dropzone.js具有dz-message元素以及主容器中的dz-preview元素。以下是我的代码如何：

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:

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.js实例中拖放预览元素的重新排序？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！