jquery - 可排序项目从一个列表移动到另一个列表，失去句柄和排序功能

Question

我有 DIV，其中包含 OL>LI 列表，每个列表都是可排序的，我将它们连接在一起，以便用户可以将 LI 从一个列表移动到另一个列表。似乎是一件很常见的事情。

当可排序列表收到一个项目时，该项目将失去其“可排序性”..或者至少句柄无法处理它。

下面是一些代码，向您展示我如何设置可排序列表：

$(".sortable").sortable({
  connectWith: ".sortable",
  revert: true,
  opacity: 0.5,
  handle: $('.sample_view_image span img'),
  cursor: 'move',
  receive: function(event, ui) {
    $(ui.item).formatSampleToGallery();
    $(ui.item).sortable("refresh"); //thought this would reconnect everything
  }
});

Answer 1

首先，我引用了 $(ui.item) ，它一开始是不可排序的。呃。

其次，当我使用正确的选择器 $(ui.item).parent() 时，“刷新”仍然没有正确地重新建立“句柄”。似乎“刷新”应该为我解决这个问题，我是不是在滥用它？！

我不得不使用以下代码使其正常工作，感觉有点脏......：

$(".sortable").sortable({
  connectWith: ".sortable",
  revert: true,
  opacity: 0.5,
  handle: $('.sample_view_image span img'),
  cursor: 'move',
  receive: function(event, ui) {
    $(ui.item).formatSampleToGallery();

    $(ui.item).parent().sortable({
      connectWith: ".sortable",
      revert: true,
      opacity: 0.5,
      handle: $('.sample_view_image span img'),
      cursor: 'move'
    });
  }
});