angular-gridster2 icon indicating copy to clipboard operation
angular-gridster2 copied to clipboard

Gridster items 'fly away' when dragged near the grid boundary

Open adam-marshall opened this issue 7 months ago • 0 comments

See https://tiberiuzuld.github.io/angular-gridster2/misc

Turn 'Set grid size' on. Use 'Fixed' mode. Drag a tile slowly closer and closer towards the boundary --> eventually keep the cursor still and the tile will continue moving in that direction, forever, until you move the cursor again and it snaps back. This happens at the horizontal and vertical boundary.

This is very unnerving to users.

Flying away horizontally

https://github.com/user-attachments/assets/ea2fc5d2-104a-46c9-8e02-553dcba06f7a

Flying away vertically

https://github.com/user-attachments/assets/245610c8-6156-4ede-a3fd-74dc68b45bbc

Use case context: we need a dashboard which can grow when the user drags tiles downwards, but also has a fixed minimum width and height. This fixed minimum width and height (1530px x 1085.10638298) represents an A4 piece of paper. This will overflow on smaller screens. This means we must use 'Fixed' mode, as the gridster element must be relatively positioned with overflow visible, so its parent element can be the one with the scrollbars. So we have to use setGridSize: true and gridType: GridType.Fixed. We can set disableScrollHorizontal: true, that stops items flying off horizontally, but it doesn't prevent them flying off vertically.

adam-marshall avatar Jul 17 '24 09:07 adam-marshall