在Rails中使用Packery

Question

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

我正在用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'
    });
  })
});

当我运行页面时，布局流就像砖石一样，但是我不能拖放图像(所有这些图像都存储在一个“..grid item”类中)。我是不是遗漏了什么？我也在使用靴带，这是值得的。

谢谢!

Answer 1

它很容易被忽略，但是文档页面包拉式在Packery的介绍段落中链接如下：

元素可以是…拖来拖去。

该文档页似乎表明您需要包括一个外部库来添加可拖放性。例如，您可以使用它推荐的库拉格布利，方法是使用Bower安装它，并将它包含在链轮中，就像您对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，请参见文件页。