Dropzone.js + Jquery UIソート可能なキュー

Question

私はユーザーがdropzoneキューをどのように変更できるかを発見しましたが、ファイルの表示のみが変更され、エラーが発生します。"Uncaught TypeError：queue.forEachは関数ではありません" 。どのように私はこれを動作させることができますか？

$("#demo-upload").sortable({ 
    items: '.dz-preview', 
    cursor: 'move', 
    opacity: 0.5, 
    containment: '#demo-upload', 
    distance: 20, 
    tolerance: 'pointer', 
    stop: function() { 
     var newQueue = ''; 
     var queue = dd.files; 
     $('#demo-upload .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); 
       } 
      }); 
     }); 

     dd.files = newQueue; 

    } 
}); 

Answer 1

私はこれに対する解決策を探していましたが、私はこのCodePenプロジェクトで正確な実装を見つけました。 Link to the implementation (Dropzone.js + jQueryUI Sortable)

HTML

<form action="/upload" class="dropzone" drop-zone="" id="file-dropzone"></form> 
    <ul class="visualizacao sortable dropzone-previews" style="border:1px solid #000"> 

    </ul> 
<div class="preview" style="display:none;"> 
    <li> 
    <div> 
    <div class="dz-preview dz-file-preview"> 
     <img data-dz-thumbnail /> 
    <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div> 
    <div class="dz-success-mark"><span>✔</span></div> 
    <div class="dz-error-mark"><span>✘</span></div> 
    <div class="dz-error-message"><span data-dz-errormessage></span></div> 
    </div> 
    </div> 
    </li> 
</div> 

CSS

@import url('https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/min/dropzone.min.css'); 
.sortable { 
    padding: 0; 
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
} 
.sortable li { 
    float: left; 
    width: 120px; 
    height: 120px; 
    overflow:hidden; 
    border:1px solid red; 
    text-align: center; 
    margin:5px; 
} 
li.sortable-placeholder { 
    border: 1px dashed #CCC; 
    background: none; 
} 

JS

$(document).ready(function(){ 
$('.sortable').sortable(); 

}); 

//DropzoneJS snippet - js 
$.getScript('https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/min/dropzone.min.js',function(){ 
    // instantiate the uploader 
    $('#file-dropzone').dropzone({ 
    url: "/upload", 
    maxFilesize: 100, 
    paramName: "uploadfile", 
    maxThumbnailFilesize: 99999, 
    previewsContainer: '.visualizacao', 
    previewTemplate : $('.preview').html(), 
    init: function() { 
     this.on('completemultiple', function(file, json) { 
     $('.sortable').sortable('enable'); 
     }); 
     this.on('success', function(file, json) { 
     alert('aa'); 
     }); 

     this.on('addedfile', function(file) { 

     }); 

     this.on('drop', function(file) { 
     console.log('File',file) 
     }); 
    } 
    }); 
}); 
$(document).ready(function() {});