Use external module packery to drag and drop object (solved)

help
1

Hi,

I would like to use packery and for some reasons I can’t use the modules of meteor. (Qlik Sense uses require.js and therefore the key word require is already in use, and conflicts with my meteor).

So I know I have to put this packery.js file into my client\compatibility folder. But somehow it won’t load this JS, and it looks this module does not have access to JQuery (load order issue?)

So how can I use meteor old style (pre 1.3) with packery?

Exception from Tracker afterFlush function:
meteor.js?hash=e3f53db…:930 ReferenceError: Packery is not defined
    at Blaze.TemplateInstance.<anonymous> (multipleDivs.js?hash=ebeba3f…:40)
    at blaze.js?hash=983d07a…:3341
    at Function.Template._withTemplateInstanceFunc (blaze.js?hash=983d07a…:3687)

if I type this in the console, I get undefined…

var elem = document.querySelector('.container');
    var pckry = new Packery(elem, {
        itemSelector: '.grid-item',
        gutter: 10
    });
undefined

I have the JS in the compatibility folder…

thanks a lot

2

for others, this works

Template.multipleDivs.onRendered(function() {

    //http://packery.metafizzy.co/#initialize-with-vanilla-javascript
    var elem = document.querySelector('.container');
    var pckry = new Packery(elem, {
        itemSelector: '.grid-item',
        gutter: 10
    });

    pckry.getItemElements().forEach(function(itemElem) {
        var draggie = new Draggabilly(itemElem);
        pckry.bindDraggabillyEvents(draggie);
    });


    this.$('.Qdiv')
        .transition('scale in');


});

3

Also note you have to restart meteor a couple of times!