Forum PHP.pl

Witam.
Mam taki kod:

[HTML] pobierz, plaintext 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 
<div class="row">
    <div class="col-12">
        <form class="dropzone" id="dpz-multiple-files" action="http://localhost/dropZoneUpload.php"
              method="post" enctype="multipart/form-data" style="border:1px solid #000;">
 
        </form>
        <br>
        <center>
            <button id="submit-all" style="height: 40px;"> Upload All the files</button>
        </center>
    </div>
</div>
 
 
<script type="text/javascript">
    Dropzone.options.dpzMultipleFiles = {
        // Prevents Dropzone from uploading dropped files immediately
        uploadMultiple: true,
        paramName: "file",
        maxFilesize: 100,
        maxFiles: 2,
        createImageThumbnails: true,
        acceptedFiles: ".png,.jpg,.jpeg",
        clickable: true,
        thumbnailWidth: 150,
        thumbnailHeight: 150,
        autoProcessQueue: false,
        init: function () {
            var submitButton = document.querySelector("#submit-all")
            dpzMultipleFiles = this;
            submitButton.addEventListener("click", function () {
                dpzMultipleFiles.processQueue();
            });
            // to handle the added file event
            this.on('completemultiple', function (file, json) {
                $('.sortable').sortable('enable');
            });
            this.on('success', function (file, json) {
                let val = file.accepted;
                if (file.accepted == true) {
                    //alert ('JSON - wgrałem!');
                    console.log(json);
                    $('.main_form').append("<input type='text' name='imgFiles[]' value='" + file.name + "'/>");
                }
                let val1 = file.name;
                //alert(val1);
            });
            this.on("addedfile", function (file) {
                var removeButton = Dropzone.createElement("<button> Remove file </button>");
                // Capture the Dropzone instance as closure.
                var _this = this;
 
                //console.log(file);
                removeButton.addEventListener("click", function (e) {
                    // Make sure the button click doesn't submit the form:
                    e.preventDefault();
                    e.stopPropagation();
 
                    // Remove the file preview.
                    _this.removeFile(file);
                    // If you want to the delete the file on the server as well,
                    // you can do the AJAX request here.
                    console.log("kasuje" + file.name);
                    console.log(file);
                });
                file.previewElement.appendChild(removeButton);
            });
            this.on('drop', function (file) {
                console.log('File', file);
                alert('bb');
            });
            this.on("maxfilesexceeded", function (file) {
                this.removeFile(file);
            });
        }
    };
    $(function () {
        $(".dropzone").sortable({
            items: '.dz-preview',
            cursor: 'move',
            opacity: 0.5,
            containment: '.dropzone',
            distance: 20,
            tolerance: 'pointer'
        });
    });
</script>
[HTML] pobierz, plaintext 

Elementy w dropzone mogę przesówać (zmieniać ich kolejność). W jaki sposób mogę pobrać indeksy plików (pozycje na liście)?

Ten post edytował trifek 2.10.2018, 11:20:00

W JS czy kolejność po przesłaniu na serwer?

Jeśli to drugie, to sprawdź czy właśnie nie są wysyłane już w posortowanej kolejności?

Generalnie chcę zrobić coś takiego:
- wgrywam zdjęcia na serwer za pomocą dropzone,
- ustalam sobie kolejność zdjęć
- po kliknięciu na zdjęcie otwieram Lightbox,
- po kliknięciu na guziczek remove - kasuje się zdjęcie.

Kolejność docelowo chcę trzymać w bazie, dlatego po każdej zmianie kolejności zdjęć chcę coś wysłać do php w celu aktualizacji rekordów
Pomyślałem że te indeksy rozwiążą problem?

Dokumentacja: http://api.jqueryui.com/sortable/#method-toArray