gridstack.js icon indicating copy to clipboard operation
gridstack.js copied to clipboard

Auto scroll not working when you are dragging a widget and at bottom or top of the screen.

Open HammadKhaan opened this issue 2 years ago • 3 comments

Subject of the issue

In previous versions of gridstack (at least 2.2.0), I had to implement the auto scroll when I am dragging a widget and at bottom or top of the screen, I added the below mention code in my options : draggable: { handle: '.grid-stack-item-content', scroll: true, appendTo: 'body', } After adding this, the auto scroll working fine whenever you are at bottom or top of the screen dragging a widget downward or upward.

But, in newer version of library (v6.0.1) the above mention code doesn't work for auto scroll, either you have to use mouse scroll or have to do back and forth motion to scroll. If this is a bug or something I am missing, because the older version was working completely fine.

Environment

Version 6.0.2 Windows OS Google Chrome Browser

Steps to reproduce

https://user-images.githubusercontent.com/65037715/188662921-212bed93-a0a1-4b4d-a095-c5eec8202c08.mp4

If you could see, I am not able to drag a widget downward, and had to do back and forth to do the downward scrolling.

Expected behavior

Whenever I am at the bottom or top of the screen and dragging a widget downward or upward respectively, the screen should be scrolling automatically. Which is the behavior in previous versions.

Actual behavior

Currently the screen doesn't move when you are at bottom or top of the screen dragging a widget.

HammadKhaan avatar Sep 06 '22 14:09 HammadKhaan

might need to use v5 for now - I believe HTML5 draggable=true did always autoscroll, while the JQ version (which is gone) had the option. v6 doesn't auto scroll in some cases, but does in others...

https://gridstackjs.com/demo/two.html https://gridstackjs.com/demo/two-jq.html

adumesny avatar Sep 15 '22 14:09 adumesny

from #2704 Just drag a node on the edge of the container and then at the edge of the page. https://jsfiddle.net/aypdz1ex/

adumesny avatar Oct 12 '22 14:10 adumesny

Subject: Auto scroll not working when you are dragging a widget and at bottom or top of the screen. Pre-requisite: Make the height of one of the items inside the grid bigger than the actual grid then drag an item from the outside of the grid to place it at the bottom, the screen does not scroll automatically.

Expected Behavior: Screen should scroll to the bottom of the screen.

https://github.com/gridstack/gridstack.js/assets/94035084/2034b229-b421-487e-98e5-26a47a1f69cf

tamilselvanyes avatar Dec 14 '23 11:12 tamilselvanyes