動的コンテンツでソート可能

Question

jQuery UIソート可能なプラグインを使用して、小さなギャラリーで写真を並べ替えることができます。

$(function() { 
    $("#area").sortable({ 
    items: '.sort-wrapper', 
    cursor: "move", 
    handle: ".photo-handler", 
    opacity: 0.5, 
    scroll: true, 
    scrollSensitivity: 100, 
    scrollSpeed: 5, 
    revert: 100, 
    tolerance: "pointer", 
    update : function() { 
     var order = $('#area').sortable('serialize'); 
     $.ajax({ 
     type : 'POST', 
     url : '/file.php', 
     data : order 
    }); 
    } 
}).disableSelection(); 

同じページで、写真を動的に追加したり削除したりします。 PHPスクリプトはdivのHTMLコードを画像リンクとボタン "remove"と "move"（ソート可能ハンドラ）を返します。

例：

<div class="sort-wrapper"> 
    <a href="photo001.jpg"><img src="photo001m.jpg" alt=""></a> 
    <button type="button" class="remove-this-photo">Remove</button> 
    <button type="button" class="photo-handler">Move</button> 
</div> 

問題は、私は新しいファイルを追加したり、#areaからファイルを削除すると作業ソート可能駅です。私は解決策を探していた、sortable('refresh')メソッドを見つけたが、それは私のために働いていない。

#areaに新しい写真を追加するスクリプトは非常に標準的です。私は$.ajax({})と.done、.fail、.alwaysの方法を使用します。 私がアップロードし、新しいファイルを開始するときsortable('destroy')メソッドを使用して、アップロードが完了した後、このような何かをするために管理：

.always(function() { 
    $("#area").sortable(); 
}); 

上記のコードは再び#areaをソート可能になりますが、私はそれを設定するには、もう一度すべての設定をコピーする必要があります方法。 ソート可能にバインドして、動的コンテンツをロードした後、またはすべての設定をsortable()の外に保存して、同じページで再び使用できるようにするにはどうすればいいですか？

Answer 1

ソート可能な要素に新しいコンテンツを追加する場合は、初期化されたインスタンスを更新する必要があります。これを行うには、次のようにrefresh optionに電話してください。

.always(function() { 
    $("#area").sortable('refresh'); 
});