Hey, I'm encountering an issue with packery.
I have each grid-item as a component and in my app.js (main file) I'm initializing packery following this example https://codepen.io/Monocle/pen/ZbeBGL
var pckry = new Packery(container, {
itemSelector: '.grid-item',
columnWidth: '.grid-sizer',
});
My goal is to control turning on/off components, making them draggable, and binding/unbinding them to packery. However, I'm struggling with adding packery as an attribute of the Vue object so that I can use this.pckry.getShiftPositions() just like in this example: https://codepen.io/desandro/pen/PZrXVv.
pckry.on( 'dragItemPositioned', function() {
// save drag positions
var positions = pckry.getShiftPositions( 'data-item-id' );
localStorage.setItem( 'dragPositions', JSON.stringify( positions ) );
});
The issue seems to be with handling the instance of the packery object. It's just not functioning correctly.
this.pckry.on( 'dragItemPositioned', function() {
// save drag positions
var positions = this.pckry.getShiftPositions( 'data-item-id' );
localStorage.setItem( 'dragPositions', JSON.stringify( positions ) );
});
But it doesn't actually work. When I try to do it like this:
this.pckry = newPackery(...);
How can I effectively address this issue?