Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React with Packery some strange issues #559

Open
MrVibe opened this issue Sep 2, 2021 · 0 comments
Open

React with Packery some strange issues #559

MrVibe opened this issue Sep 2, 2021 · 0 comments

Comments

@MrVibe
Copy link

MrVibe commented Sep 2, 2021

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

No branches or pull requests

1 participant