web-dev-qa-db-ja.com

dropzone.jsインスタンスのプレビュー要素のドラッグアンドドロップによる並べ替えを行う方法はありますか？

次のオプションを使用して、Webページにdropzone.jsインスタンスがあります。

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

より大きなフォームの一部であるため、プログラムによってインスタンス化されます。フォームが送信されたときにキューを処理するように準備しました。

目標は、ユーザーがドロップゾーンを使用してアイテムの画像を管理できるようにすることです。そのため、dropzone.jsの画像プレビューをドラッグアンドドロップして画像を並べ替えることができるようにしたいと思います。これを行う良い方法はありますか？ jquery-uiのsortableを使用してみましたが、dropzone.jsでNiceを再生できないようです。

drag-and-dropdropzone.jspreview
14
ralbatross

Jquery-uiのsortableを使用して動作するようになりました。 dropzone.jsにはメインコンテナ内のdz-preview要素とともにdz-message要素があるため、トリックは、並べ替え可能な「items」オプションを使用して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'
    });
})
24
ralbatross

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;

    }
});

また、ファイルは非同期で処理されることを忘れないでください。ファイルが完了したときに参照できるようにハッシュテーブルを保持し、最後に順序を保存します。

重複するファイル名では機能しません

4
Chris

プラグインなしの別のオプションがあります。成功イベントのコールバックでは、手動で並べ替えることができます。

   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