可与动态内容一起排序 [英] Sortable with dynamic content

问题描述

因此，我使用jQuery UI可排序插件在一个小画廊中对照片进行排序.

So I use jQuery UI sortable plugin to sort photos in a small gallery.

$(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代码，带有图像链接和按钮删除"和移动"(可排序处理程序).

On the same page I dynamically add and remove photos. PHP script returns HTML code with div's with image links and buttons "remove" and "move" (sortable handler).

示例:

<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')方法，但是它对我不起作用.

The problem is sortable stops working when I add new files or remove a file(s) from #area. I've been looking for solution, have found sortable('refresh') method, but it's not working for me.

在#area中添加新照片的脚本是非常标准的.我使用$.ajax({})和.done，.fail，.always方法. 开始上传新文件时，我设法使用了sortable('destroy')方法，并在上传完成后执行了以下操作:

The script which adds new photos in the #area is quite standard. I use $.ajax({}) and .done, .fail, .always methods. I managed to use sortable('destroy') method when starting uploading new files and do something like this after uploading is finished:

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

上面的代码使#area再次可排序，但是我必须再次复制所有设置以自己的方式对其进行配置. 如何绑定可排序对象以使其在加载动态内容后起作用，或者如何将所有设置存储在sortable()之外，并能够在同一页面上再次使用它?

The code above makes the #area sortable again, but I must copy all the settings again to configure it my way. How to bind sortable to make it work after dynamic content is loaded or how to store all the settings outside sortable() and be able to use it again on the same page?

推荐答案

如果将新内容添加到可排序元素中，则需要刷新初始化的实例.为此，请调用 refresh选项，如下所示:

If you add new content to the sortable element you'll need to refresh the initialised instance. To do that, call the refresh option, like this:

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

这篇关于可与动态内容一起排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！