Skip to content

React with Packery some strange issues #559

Open
@MrVibe

Description

@MrVibe

I am dealing with 2 major issues with packery.

a. The layout does incorrect calculations.
b. Mobile scrolling, enable / disable packery to allow scroll.

--
Unable to submit Codepen but I am using React 16 with Packery but there are some strange issues happening. Can you possibly give us a hint on where we should start debugging.
https://drive.google.com/file/d/158G_n-HDQ03EtlX5V9VQPFN-r0Z7dlUZ/view

Since packery stops all scrolling in mobile. How to disable packery on elements. The Draggabliy disable event does not enable scrolling so we had to destroy the entire packery but can we retain the layout when we disable packery ?

`const initiliasePackery = () =>{

	var grid = document.querySelector('.dashboard');
	if(gpackery){
		gpackery.layout();
	}else{
		var pckry = new Packery( grid, {
		  percentPosition: true,
		  gutter:0,
		  stagger:30
		});	

		if(pckry){
			
			let ndraggies = [];
			pckry.items.forEach( function( item ) {
			   var draggie = new Draggabilly( item.element,{
			  		containment:'.dashboard-wrapper',
			  	});
			   	draggie.disable();
			  	ndraggies.push(draggie);
			  	pckry.bindDraggabillyEvents( draggie );
			});
			setDraggies(ndraggies);
			grid.addEventListener( 'dragItemPositioned', ()=>{
			  var positions = pckry.Packery( 'getShiftPositions', 'data-widget-id' );
			  if(Array.isArray(positions)){
			  	let nwidgets = [];
			  	positions.map((widget_id)=>{
			  		nwidgets.push(widgets[widgets.findIndex((w)=>w.id==widget_id)]);
			  	});
			  	console.log('update');
			  	//props.update(nwidgets);
			  }
	
			});
			setPackery(pckry);
		}
	}
}`

`useEffect(()=>{
if(!move && gpackery && draggies.length){
// console.log('#2');
// draggies.map((draggie)=>{
// //draggie.disable(); NOT WORKING
// draggie.destroy(); NOT WORKING
// gpackery.unbindDraggabillyEvents( draggie );
// });
}

		if(move){
                           if(draggies.length){
                             draggies.map((draggie)=>{
				draggie.enable();
				gpackery.bindDraggabillyEvents( draggie );
			});

}else{
initiliasePackery();
}
}
},[move]);`

Any suggestion / hint that can help are welcome.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions