Есть ли способ сделать перетаскивание перетаскиванием элементов предварительного просмотра в экземпляр dropzone.js?

У меня есть экземпляр dropzone.js на веб-странице со следующими параметрами:

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

Он программно инстанцируется, поскольку он является частью более крупной формы. Я приложил его для обработки очереди при отправке формы.

Цель моих пользователей - использовать dropzone для управления изображениями для элемента, поэтому я бы хотел, чтобы они могли повторно заказывать изображения, перетаскивая предварительный просмотр изображений dropzone.js. Есть ли хороший способ сделать это? Я попытался использовать jquery-ui sortable, но, похоже, он не играет хорошо с dropzone.js.

Ответ 1

Теперь я работаю, используя jquery-ui sortable. Хитрость заключалась в том, чтобы использовать опцию "items" в sortable для выбора только элементов dz-preview, потому что у dropzone.js есть элемент dz-message вместе с элементами dz-preview в главном контейнере. Вот как выглядит мой код:

HTML:

<div id="image-dropzone" class="dropzone square">

script:

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

Ответ 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;

    }
});

И помните, что файл обрабатывается async, я сохраняю хэш-таблицу для ссылки, когда файл сделан, и сохраняем заказ в конце.

Он не работает с повторяющимися именами файлов

Ответ 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);
    });