可使用动态内容排序

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 代码，带有图像链接和按钮“删除”和“移动”（可排序的处理程序）。

例子：

<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 使其工作或如何将所有设置存储在sortable() 之外并能够在同一页面上再次使用？

Answer 1

如果您向可排序元素添加新内容，则需要刷新已初始化的实例。为此，请致电refresh option，如下所示：

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