将 Packery 与 Rails 结合使用

Question

这是我的第一个堆栈溢出问题！

我正在用Rails构建一个Pinterest克隆，并使用Packery作为索引页面;我希望能够在页面上的帖子中移动，而Packery似乎是这项工作的工具。我用Bower安装了Packery并将其包含在我的应用程序中.js文件

//= require packery/dist/packery.pkgd.min.js

在那下面，我有这个代码块

$(document).ready(function(){
  $('.grid').imagesLoaded(function() {
    $('.grid').packery({
      itemSelector: '.grid-item'
    });
  })
});

当我运行页面时，布局就像砌体一样流动，但我无法拖放图像（全部存储在带有".grid-item"类的 a 中）。我错过了什么吗？我也在使用Bootstrap，这是值得的。

谢谢！

Answer 1

这很容易错过，但是文档页面Packery – Draggable在Packery的介绍段落中链接如下：

元素可以是...拖来拖去。

该文档页面似乎表明您需要包含一个外部库来增加可拖动性。例如，您可以使用它推荐的库 Draggabilly，方法是使用 Bower 安装它并将其包含在 Sprockets 中，就像您使用 Packery 所做的那样，然后使用以下 JS：

$(document).ready(function(){
  $('.grid').imagesLoaded(function() {
    $('.grid').packery({
      itemSelector: '.grid-item',
      // columnWidth helps with drop positioning
      columnWidth: 100
    });
    $grid.find('.grid-item').each( function( i, gridItem ) {
      var draggie = new Draggabilly( gridItem );
      $grid.packery( 'bindDraggabillyEvents', draggie );
    });
  })
});

请参阅该文档页面，了解您还应该添加的一些 CSS。