Javascript jQuery无法使用同位素排序表

我正在尝试使用jQueryUI的本机

sortable

选项，以及基于某些条件，使用同位素插件（

---

这是我的提琴：。你会发现，同位素在这里工作得很好，单击按钮确实会按预期对其进行排序。但是jQuery UI

sortable

不起作用，你可以拖动它，但一旦释放，它就会返回到原来的位置。如果不使用同位素，它会按预期工作得很好：。你知道如何使这两个都工作吗？

看起来确实与同位素有冲突。将容器变量声明放在click中允许我使用sortable，直到调用。单击“foo”按钮

我很确定这是由于同位素在单击后应用的样式。绝对位置将这些div固定到这些位置（如下图所示）。此绝对位置将不允许这些元素占据新位置。如果您希望继续此路线，则需要在jquery drop事件上写下此位置

加载时的初始HTML：

<div class="test test2 ui-sortable">
            <div class="bookmark b1">z</div>
            <div class="bookmark b2">d</div>
            <div class="bookmark b3">s</div>
            <div class="bookmark b4">a</div>
            <div class="bookmark b5">q</div>
            <div class="bookmark b6">e</div>
            <div class="bookmark b7">b</div>
</div>

Z
D
s
A.
Q
E
B

“foo”点击后的HTML：

D
s
A.
Q
E
B

同位素添加了一个带有位置限制的样式attibute，另一个答案中也提到了这一点

这就是治疗方法：

基本上，您可以使用同位素生成的排序列表来实际执行子元素的排序，就像jQueryUISortable所做的那样

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

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

位置：绝对
css规则）

编辑我们还必须在每次重新排序后销毁同位素对象，否则它会搞砸
booth插件工作正常，但同位素不会更改DOM中的div顺序！同位素只定义绝对位置，并可对DOM进行排序。如果尝试在init同位素之后排序，则会更改DOM中的位置，但B同位素的绝对位置不会改变。是否需要使用同位素？您还可以使用jquery sort对div进行排序问题在于同位素应用的样式。您可以利用同位素动画及其计算的顺序来实际移动元素，这样就不再需要样式了：此时，您将能够拖动并再次删除元素。有关详细信息，请参阅下面的答案和JSFIDLE示例
<div class="test test2 ui-sortable" style="position: relative; height: 350px;">     
    <div class="bookmark b1" style="position: absolute; left: 0px; top: 300px;"></div>
    <div class="bookmark b2" style="position: absolute; left: 0px; top: 100px;">d</div>
    <div class="bookmark b3" style="position: absolute; left: 0px; top: 250px;">s</div>
    <div class="bookmark b4" style="position: absolute; left: 0px; top: 0px;">a</div>
    <div class="bookmark b5" style="position: absolute; left: 0px; top: 200px;">q</div>
    <div class="bookmark b6" style="position: absolute; left: 0px; top: 150px;">e</div>
    <div class="bookmark b7" style="position: absolute; left: 0px; top: 50px;">b</div>
</div>

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