Gibt es eine Möglichkeit, drag-and-drop die Reihenfolge der Elemente in einer Vorschau dropzone.js Instanz?

Habe ich eine dropzone.js Beispiel auf eine web-Seite mit den folgenden Optionen:

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

Es ist programmgesteuert instanziiert, wie es ist Teil einer größeren form. Ich habe es manipuliert, um Prozess der Warteschlange, wenn das Formular abgeschickt wird.

Ziel ist es für meine Benutzer in der Lage sein zu verwenden, die dropzone zu verwalten, Bilder für einen Artikel, so dass ich möchten, dass Sie in der Lage sein, um die Reihenfolge der Bilder per Drag und Drop die dropzone.js Bild-Vorschau. Ist es ein guter Weg, dies zu tun? Ich habe versucht, mit jquery-ui ist sortierbar, aber es scheint nicht zu spielen schön mit dropzone.js.

InformationsquelleAutor ralbatross | 2014-03-26
  1. 22

    Ich habe es nun mit jquery-ui ist sortierbar. Der trick war, stellen Sie sicher, dass Sie die "items" - option im sortierbar zu Holen nur die dz-Vorschau-Elemente, weil dropzone.js hat die dz-message-element zusammen mit der dz-Vorschau der Elemente in der Haupt-container. Hier ist, wie mein code aussieht:

    HTML:

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

    Dem Skript:

    $(function() {
    $("#image-dropzone").sortable({
        items:'.dz-preview',
        cursor: 'move',
        opacity: 0.5,
        containment: '#image-dropzone',
        distance: 20,
        tolerance: 'pointer'
    });
})
    • in meinem Fall hat es nicht funktioniert, können Sie näher erläutern, einige mehr..
    • its done, thanks for sharing
    • Ich habe auch die Funktionalität, um die Bilder neu anordnen und speichern es auf dem server, wie kann ich die neue Reihenfolge der Dateien?
    • Wirklich nett, aber könnte ich Sie Fragen, wie das erstellen call-back-Funktion nach Art-in der Lage, den Erfolg?
    • Auch ich fügte dies hinzu: $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); } – entfernen dz anklickbar zum deaktivieren der Datei-öffnen-dialog nach dem ziehen. entfernen dz-Erfolg, weil die animation gespielt, jedes mal nach ziehen. Auch ich hatte problem mit dem item verschwinden beim ziehen – dort war der bug in der jquery-ui ist sortable.js – ersetzt this.document[0] mit this.document[0].body on line 1008
    • Was ist "$dropzone"? Das nicht auflösen, zu nichts.
    • davon ausgehen, dass $dropzone = $('.images-dropzone'); new Dropzone($dropzone.get(0), options); $dropzone.sortable(sortable_options);
    • Bin ich richtig in der Annahme, dass diese nicht in das Dropzone.js Datei und geben Sie diese in einen separaten .js-Datei?
    • Richtig
    • Toll. Der obige code bei mir funktioniert, aber Sie sind nicht speichern, wie das. Irgendwelche Vorschläge?
    • das ist wahrscheinlich lohnt sich eine separate Frage ALSO, aber im wesentlichen habe ich zu halten hatte, ein bisschen zusätzliche meta-Daten in der dropzone Elemente und senden Sie dieses zusammen in der POST, sowie in der Antwort von der POST

    InformationsquelleAutor ralbatross
  2. 4

    Neben den code aus ralbatross Sie benötigen, um die Reihenfolge der die Datei Warteschlange der dropzone..

    Etwas wie:

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

    }
});

    Und denken Sie daran, dass die Datei verarbeitet, async, halte ich eine hashtable für die Referenz, wenn die Datei fertig und speichern Sie die Bestellung am Ende.

    Funktioniert es nicht mit doppelten Dateinamen

    • Vielen Dank für das snippet, für mich gearbeitet. Jedoch, in meinem dropzone bauen, mit dem Namen gespeichert ist, innerhalb des span-Elements, also schrieb ich var name = el.innerHTML; statt var name = el.getAttribute('data-name');
    • Gleichen fix wie Atan, sowie die Definition newQueue bevor Sie versuchen, Sie zu irgendetwas zu ihm: var queue = uploadzone.files, newQueue = [];
    InformationsquelleAutor Chris
  3. 1

    Hier ist eine andere option, ohne irgendwelche plugins. Auf den Erfolg von Ereignis-Rückruf, können Sie einige der manuellen Sortierung: 

       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);
    });
    InformationsquelleAutor Greg Sipes
Schreibe einen Kommentar