Skip to content

Can't easily drag widgets below widgets on the bottom border of a grid #219

Closed

Description

@derekm

Gridster pops a few blank rows at the bottom of a grid, making it easy for your drag to scroll the window downward. When a gridstack grid has filled the window, it is impossible to drag a widget below any widget that touches the bottom border. Turning on float causes drags to add extra rows as needed. With float off, it could do the same then let the block fall upward into position.

Activity

  1. svdb commented on Sep 28, 2015

    @svdb

    Just wrap your gridstack DIV inside a parent DIV, then give the parent DIV a padding-bottom >= the stackgrid row height.
    So when you move a widget down you always have extra space and stackgrid will add a new row.

  2. radiolips commented on Feb 19, 2016

    @radiolips
    Member

    @derekm did adding padding work? It should. I'm closing this issue, but please feel free to reopen it if you still have a problem.

  3. frankadrian commented on Mar 30, 2017

    @frankadrian

    Hey @radiolips, This does not seem to work for items that are being dragged from another grid. I will try create a example for this!

  4. frankadrian commented on Mar 30, 2017

    @frankadrian

    The behaviour can be seen here: https://gridstackjs.com/demo/two.html

    Try dragging an item from one grid below an item in the other grid!

  5. trongletps commented on May 8, 2017

    @trongletps

    I had same issue with @frankadrian. When I set float equal false, to difficultly to drag the widget below one from the grid to the another grid.

  6. trongletps commented on May 11, 2017

    @trongletps

    Everything work well except this case but it's very important with user experience, so uncomfortable when drag and drop item from sidebar to main grid (drag item from sidebar below the other items in main grid).

  7. added this to the v1.0.0 milestone on May 12, 2018
  8. stevenliebregt commented on Feb 22, 2019

    @stevenliebregt

    What is the status off this issue?

  9. adumesny commented on Dec 22, 2019

    @adumesny
    Member

    see #1094 as well

  10. removed this from the v1.0.0 milestone on Nov 14, 2020
  11. adumesny commented on Dec 13, 2020

    @adumesny
    Member

    this might get fixed along #1001 as we will add an extra temporary row the moved/resized item is at the bottom.

  12. adumesny commented on Jan 3, 2021

    @adumesny
    Member

    it is now possible in v3 HTML5 drag version (we get auto-scroll) but a little rough so keeping it open to address side effects shown below:

    20210103_092419.mp4
  13. added a commit that references this issue on Apr 4, 2021
    b0440be
  14. adumesny commented on Apr 4, 2021

    @adumesny
    Member

    should work a lot better now in next release.

    we now automatically insert extra rows when dragging an item at the bottom below others to make it easier to insert below, while allowing objects to be easily removed (not colliding with others)

    20210404_081138.mp4
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

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions