Dropzoneソート済み配列をAjaxファイルに送信

Question

新しいソート順配列をajaxファイルに送信しようとしています。

私はauction.ajax.phpファイルにソートされた配列を取得したいのソート後の順序を並べ替えるためのjQuery UIを使用しています。

私も配列を準備しようとしています。私は再注文されたファイル名の配列をajaxページに送る必要があります。

<script> 
    $(document).ready(function(e) { 
    var imageNames = []; 

    $(function() { 
     $("#myDrop").sortable({ 
     items: '.dz-preview', 
     cursor: 'move', 
     opacity: 0.5, 
     containment: '#myDrop', 
     distance: 20, 
     tolerance: 'pointer', 

     }); 

     $("#myDrop").disableSelection(); 
    }); 

    //Dropzone script 
    Dropzone.autoDiscover = false; 
    var myDropzone = new Dropzone("div#myDrop", { 
     paramName: "files", // The name that will be used to transfer the file 
     addRemoveLinks: true, 
     uploadMultiple: true, 
     autoProcessQueue: false, 
     parallelUploads: 50, 
     maxFilesize: 2, // MB 
     acceptedFiles: ".png, .jpeg, .jpg, .gif", 
     url: "ajax/actions.ajax.php", 

    }); 

/*Ans code*/ 
    myDropzone.on("sending", function(file, xhr, formData) { 
     var filenames = []; 

     $('.dz-preview .dz-filename').each(function() { 
     filenames.push($(this).find('span').text()); 
     }); 

     formData.append('filenames', filenames); 
    }); 

    /* Add Files Script*/ 
    myDropzone.on("success", function(file, message) { 
     $("#msg").html(message); 
     //setTimeout(function(){window.location.href="index.php"},800); 
    }); 

    myDropzone.on("error", function(data) { 
     $("#msg").html('<div class="alert alert-danger">There is some thing wrong, Please try again!</div>'); 
    }); 

    myDropzone.on("complete", function(file) { 
     //myDropzone.removeFile(file); 
    }); 

    $("#add_file").on("click", function() { 
     myDropzone.processQueue(); 
    }); 
    }); 
</script> 
<div class="dropzone dz-clickable" id="myDrop"> 
    <div class="dz-default dz-message" data-dz-message=""> 
    <span>Drop files here to upload</span> 
    </div> 
</div> 
<input type="text" name="sortingOrder" id="sortingOrder" value=""> 
<button id="add_file">Add</button> 

Answer 1

これは、sendingイベントを使用する方法の1つです。このイベントはパラメータとしてformDataを受け取るので、変更してサーバーにデータを送信できます。

myDropzone.on("sending", function(file, xhr, formData) { 
    var filenames = []; 

    $('.dz-preview .dz-filename').each(function() { 
    filenames.push($(this).find('span').text()); 
    }); 

    formData.append('filenames', filenames); 
}); 

今、各呼び出しは、パラメータfilenamesで構成し、ドロップゾーンにあるすべてのファイルのソート名前が含まれます。

これをご覧くださいworking plunkerスタイリングは適用されませんが、をクリックしてボタンをクリックすると、コンソールにファイル名が表示されます。