gridstack.js
gridstack.js copied to clipboard
Auto scroll not working when you are dragging a widget and at bottom or top of the screen.
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.
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
from #2704 Just drag a node on the edge of the container and then at the edge of the page. https://jsfiddle.net/aypdz1ex/
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