Использование Packery with Rails

Question

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

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

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

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

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

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

Спасибо!

Answer 1

Это легко пропустить, но в документации страница Packery – Draggable связана в интро пункте Packery как это:

Элементы могут быть ... dragged around.

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