Est-il un moyen de faire glisser et déposez-la réorganisation de l'aperçu des éléments dans un dropzone.js exemple?

J'ai un dropzone.js exemple sur une page web avec les options suivantes:

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

Il est instancié par programme, car il fait partie d'une plus grande forme. Je l'ai calé pour le traitement de la file d'attente lorsque le formulaire est soumis.

L'objectif est pour mes utilisateurs d'être en mesure d'utiliser la dropzone de gérer des images pour un article, donc je voudrais qu'ils soient en mesure de remettre en ordre les images par glisser-déposer l'dropzone.js les aperçus d'image. Est-il une bonne façon de le faire? J'ai essayé à l'aide de jquery-ui sortable, mais il ne semble pas jouer gentil avec dropzone.js.

InformationsquelleAutor ralbatross | 2014-03-26

24

J'ai travaille maintenant à l'aide de jquery-ui sortable. L'astuce est de faire en sorte d'utiliser les 'éléments' option dans triable de choisir seulement le dz-aperçu des éléments, parce que dropzone.js a la dz-message d'élément avec l'dz-aperçu des éléments dans le conteneur principal. Voici comment mon code ressemble:

Le code HTML:
```
<div id="image-dropzone" class="dropzone square">
```
Le script:
```
$(function() {
    $("#image-dropzone").sortable({
        items:'.dz-preview',
        cursor: 'move',
        opacity: 0.5,
        containment: '#image-dropzone',
        distance: 20,
        tolerance: 'pointer'
    });
})
```
- J'ai aussi la fonctionnalité de réorganiser les images et de les stocker sur le serveur, comment puis-je obtenir le nouveau système de fichiers?
- Vraiment sympa, mais pourrais-je vous demander comment créer fonction de rappel après tri-mesure de la réussite?
- Aussi j'ai ajouté ceci: $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); } – supprimer dz-cliquable pour désactiver la boîte de dialogue ouvrir fichier après le faisant glisser. supprimer dz-succès parce que les animations joué à chaque fois après le glissement. Aussi, j'ai eu problème avec le point de disparaître tout en faisant glisser – il y avait un bug dans jquery-ui sortable.js – remplacé this.document[0] avec this.document[0].body sur la ligne de 1008
- Qu'est-ce que "$dropzone"? Cela ne résout pas pour rien.
- supposons que $dropzone = $('.images-dropzone'); new Dropzone($dropzone.get(0), options); $dropzone.sortable(sortable_options);
- Suis-je raison de supposer que cela ne devrait pas aller dans le Dropzone.js fichier et devrait être inscrite dans un .fichier js?
- Correct
- Grand. Le code ci-dessus a fonctionné pour moi, mais ils n'épargnent pas comme ça. Toutes les suggestions?
- c'est probablement la peine distinct DONC, la question, mais, fondamentalement, je devais maintenir un peu de méta-données dans la dropzone éléments, puis les envoyer dans le POSTE, ainsi que dans la réponse de la POSTE
InformationsquelleAutor ralbatross
4

Outre le code de ralbatross vous aurez besoin de définir l'ordre de la file d'attente de dropzone..

Quelque chose comme:
```
$("#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;

    }
});
```
Et rappelez-vous que le fichier est traité async, je garde une table de hachage pour référence lorsque le fichier est fait et sauvegarder l'ordre à la fin.

Il ne fonctionne pas avec les noms de fichiers doublons
- Merci pour l'extrait, a travaillé pour moi. Cependant, dans mon dropzone construire, le nom de fichier est stocké à l'intérieur de l'élément span j'ai donc écrit var name = el.innerHTML; au lieu de var name = el.getAttribute('data-name');
- Même fixer comme Atan, ainsi que la définition de newQueue avant d'essayer de faire pousser quoi que ce soit: var queue = uploadzone.files, newQueue = [];
- Intéressant. Dropzone d'aujourd'hui (5.5) ne doit pas avoir besoin de cette étrange file d'attente hack, car il semble bien fonctionner avec .sortable directement.
- Je ne l'ai pas utilisé pendant une longue période, mais ce pourrait être parce que soit vous avez parallelUploads à 1, ou vous avez de la chance que tous les fichiers terminer dans le même ordre qu'ils sont triés en essayer un grand fichier en tant que deuxième et une autre plus petite que la première.
InformationsquelleAutor Chris

Voici une autre option sans plugins. Sur le succès de rappel d'événement, vous pouvez faire un peu de tri manuel:

   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

Vous devez vous connecter pour publier un commentaire.