angular-gridster2
angular-gridster2 copied to clipboard
Gridster items 'fly away' when dragged near the grid boundary
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.