使用 jQuery 库 Packery 制作卡片 lay-out 我可以 re-order 使用导航链接

Question

我正在尝试使用 Packery 的 fit method to move a card to the front of the row when I click on its corresponding link a navigation menu. Going by the example on codepen 这应该是可行的，但我无法弄清楚。

This is what I have so far. 当我点击项目时，项目被移动到前面。卡片上的点击会传递到 parent，因此现在也可以正常工作。但我不知道如何使用 link 上的点击来移动卡片。那里有一些代码，但它不起作用。它注册了点击，我已经用 console.log 验证了这一点，但随后它给出了这个错误：

cannot call methods on packery prior to initialization; attempted to call 'fit'

（点击标题可以打开导航卡，然后点击"Vision"应该将视觉卡移动到0,0位置。）

我做错了什么？

提前致谢！

Answer 1

这成功了：

$("#navigation-list li").click(function() {
    var moveThis = this.id.replace('-button','');
    $container.packery( 'fit', document.getElementById(moveThis), 200, 0 );    
  });

该方法需要在 DOM 元素上调用，不适用于 jQuery 选择器。您可以通过将 [0] 附加到选择器来使其工作，如下所示： $("#someId")[0].

使用 jQuery 库 Packery 制作卡片 lay-out 我可以 re-order 使用导航链接

Using jQuery library Packery to make a card lay-out I can re-order with navigation links

html

javascript

jquery

packery