可对动态内容进行排序

所以我使用 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 脚本返回 HTML 代码div带有图像链接和按钮“删除”和“移动”（可排序处理程序）。

Example:

<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({}) and .done, .fail, .always方法。 我设法使用sortable('destroy')开始上传新文件时的方法，并在上传完成后执行类似的操作：

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

上面的代码使得#area再次可排序，但我必须再次复制所有设置才能按照我的方式配置它。 如何绑定可排序以使其在加载动态内容后工作或如何将所有设置存储在外部sortable()并能够在同一页面上再次使用它？

如果将新内容添加到可排序元素，则需要刷新初始化的实例。为此，请致电refresh option http://api.jqueryui.com/sortable/#method-refresh， 像这样：

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