将 Packery 与 Rails 一起使用

Question

这是我的第一个 Stack Overflow 问题！

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

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

在此之下，我有这段代码

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

当我运行页面时，布局像 Masonry 一样流动，但我不能拖放图像（所有图像都存储在 class 的“.grid-物品”）。我错过了什么吗？我也在使用 Bootstrap，这是值得的。

谢谢！

Answer 1

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

Elements can be … dragged around.

该文档页面似乎表明您需要包含一个外部库来添加可拖动性。例如，您可以使用它推荐的库 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 );
    });
  })
});

请参阅 that documentation page 以了解一些您还应该添加的 CSS。

将 Packery 与 Rails 一起使用

Using Packery with Rails

jquery

ruby-on-rails

packery