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

示例：

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

可以对动态内容进行排序

1 个答案: