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

Question

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

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

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

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

drag-and-drop dropzone.js preview

18

ralbatross 26 Мар 2014 в 20:04

Answer 1

Теперь у меня он работает, используя jquery-ui sortable. Хитрость заключалась в том, чтобы обязательно использовать опцию 'items' в sortable, чтобы выбрать только элементы 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'
    });
})

28

ralbatross 26 Мар 2014 в 20:46

У меня также есть возможность переупорядочивать изображения и хранить их на сервере, как я могу получить новый порядок файлов?

–

MegaBytes

9 Мар 2015 в 09:23

Действительно приятно, но могу я спросить вас, как создать функцию обратного вызова после успешного сортировки?

–

Samphors

16 Янв 2016 в 06:16

Также я добавил это:

$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 — заменил this.document[0] на this.document[0].body в строке 1008.

–

Lev Lukomsky

20 Июл 2016 в 23:12

Что такое "$ dropzone"? Это ни к чему не приводит.

–

Aaron

28 Июл 2016 в 01:35

1

Это, вероятно, стоит отдельного вопроса SO, но в основном мне пришлось поддерживать немного дополнительных метаданных в элементах dropzone, а затем отправлять их в POST, а также в ответе от POST

–

ralbatross

19 Янв 2017 в 18:01

Answer 2

Помимо кода из ралбатросса вам нужно будет установить порядок файловой очереди 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;

    }
});

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

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

6

Chris 31 Мар 2016 в 16:33

1

Спасибо за фрагмент, сработало для меня. Однако в моей сборке dropzone имя файла хранится внутри элемента span, поэтому я написал var name = el.innerHTML; вместо var name = el.getAttribute('data-name');.

–

Atan

29 Июн 2016 в 19:16

2

То же исправление, что и у Atan, а также определение newQueue перед попыткой передать ему что-либо: var queue = uploadzone.files, newQueue = [];

–

Nate Beaty

5 Апр 2017 в 04:26

Интересно. Dropzone сегодня (5.5) не должен нуждаться в этом странном взломе очереди, поскольку он, кажется, отлично работает с .sortable напрямую.

–

IncredibleHat

28 Окт 2019 в 23:41

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

–

Chris

4 Ноя 2019 в 16:44

Answer 3

Вы можете использовать SortableJS (https://github.com/SortableJS/Sortable)

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

3

cnmuc 1 Май 2022 в 20:24

Answer 4

Вот еще один вариант без каких-либо плагинов. В обратном вызове успешного события вы можете выполнить некоторую ручную сортировку:

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

2

Greg Sipes 13 Мар 2017 в 20:20

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

4 ответа

Похожие вопросы

Связанные вопросы

Новые вопросы

drag-and-drop