javascript - jQuery 无法将 Sortable 与同位素一起使用

Question

我正在尝试使用 jQuery UI 的 native sortable 选项创建一个可排序的项目表，并使用 Isotope 插件 ( here) ) 根据某些条件进行排序。

这是我的 fiddle :http://jsfiddle.net/SA5yh/4/ 。您会发现，这里 Isotope 工作正常，单击按钮确实可以按预期对其进行排序。但是 jQuery UI sortable 不起作用，你可以拖动它，但是一旦释放，它就会返回到原来的位置。不使用同位素，它可以正常工作，正如预期的那样:http://jsfiddle.net/SA5yh/5/ 。知道如何让两者都工作吗？

Answer 1

同位素添加了带有位置限制的样式属性，正如另一个答案中提到的。

这就是治疗方法: http://jsfiddle.net/zd6mT/4/

  //An event handler for when isotope is done reordering elements
  $container.isotope( 'on', 'layoutComplete',
      function( isoInstance, laidOutItems ) {

          var n = laidOutItems.length;
          for (var i = n-1; i >= 0; i--) {
              //Starting from the last element in the list
              //moves them to the beginning of their parent tag
              //so in the end the elements are actually sorted
              //and style properties can be removed
              $('.test').prepend(laidOutItems[i].element);
          }
          //remove all styles applied by isotope
          $('.bookmark').removeAttr('style');
          $container.isotope('destroy');
      }
  );

基本上，您可以使用 isotope 生成的排序列表来实际执行子元素的排序，就像 jQuery UI sortable 所做的那样。

一旦它们全部就位，您就不需要同位素强制的样式约束。

因此，一旦同位素动画结束，您首先对所有子项进行排序，然后将它们从样式属性中删除(当然，假设您没有直接向元素添加任何其他内容 - 否则，只需删除 position:absolute style 属性内的 css 规则)

编辑我们还必须在每次重新排序后销毁同位素对象，否则会搞砸