jQueryUI可排序+ HTML5文件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部分：

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); 
} 

見行動全碼在： 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