jQueryUI Sortable + HTML5 File APIの例？

Question

jQueryUI：Sortable：display-gridとHTML5 File APIを組み合わせた良い例は誰でも知っていますか？複数のローカルイメージをブラウザに同時にドロップして表示グリッドに表示する？

文献：
http://jqueryui.com/demos/sortable/#display-grid
http://html5demos.com/file-api
How can I read a local file when the user presses a button using the HTML5 File API ?

Answer 1

が画像のプレースホルダを作成します。プレースホルダにソート

<ul id="sortable"></ul> 

バインド：

$("#sortable").sortable(); 
$("#sortable").disableSelection(); 

バインドプレースホルダondrop機能：

$('#sortable').on(
    'drop', 
    function(e){ 
     if(e.originalEvent.dataTransfer){ 
      if(e.originalEvent.dataTransfer.files.length) { 
       e.preventDefault(); 
       e.stopPropagation(); 
       upload(e.originalEvent.dataTransfer.files); 
      } 
     } 
    } 
); 

最後になりましたが、ファイルのAPIの一部を記述します。 http://jsfiddle.net/xKYxL/2/

クレジット： https://www.ibm.com/developerworks/mydeveloperworks/blogs/bobleah/entry/html5_code_example_of_file_api_drag_drop_hard_drive_files_to_a_webpage28?lang=en

function upload(files){ 
    for (var i = 0, f; f = files[i]; i++) { 
     var imageReader = new FileReader(); 
     imageReader.onload = (function(aFile) { 
      return function(e) { 
       var li = document.createElement('li'); 
       li.innerHTML = ['<img class="images" src="', e.target.result,'" title="', aFile.name, '"/>'].join(''); 
       $('#sortable').append(li); 
     }; 
    })(f); 
    imageReader.readAsDataURL(f); 
} 

がでアクションでフルコードを参照してください。