Sitelet https://github.com/tiberiuzuld/angular-gridster2/issues/919
Skip to content

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

Description

@adam-marshall

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

Screen.Recording.2024-07-17.at.10.23.58.mov

Flying away vertically

Screen.Recording.2024-07-17.at.10.29.02.mov

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.

Activity

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions