Использование упаковки с рельсами

Это мой первый вопрос переполнения стека!

Я создаю клон Pinterest с Rails и использую Packery для индексной страницы; я хочу иметь возможность перемещать сообщения на странице, и Packery кажется инструментом для работы. Я установил Packery с Bower и включил его в свое приложение.JS файл

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

Ниже, у меня есть этот блок кода

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

Когда я запускаю страницу, макет течет так же, как Masonry, но я не могу перетаскивать изображения (все хранятся в классе «.grid-item»). Я что-то упускаю? Я также использую Bootstrap, для того, что это стоит.

Спасибо!

1 ответ

  1. Это легко пропустить, но страница документации Packery-Draggable связана в вводном параграфе Packery следующим образом:

    Элементы можно … перетаскивать .

    Эта страница документации, по-видимому, указывает на необходимость включения внешней библиотеки для добавления перетаскиваемости. Например, вы можете использовать библиотеку, которую она рекомендует, Draggabilly, установив ее с 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, которые вы также должны добавить.