2

I am building something like trello board that has dnd feature between columns and items inside the column. I want to build auto-scrolling when dragging the item to the end of parent container. But I am getting warning whenever dragging items warning image

It seems like react-beautiful-dnd doesn't support multi scroll container like trello. Don't we have solution for this? or do we need to implement it by controlling the scrollbar manually?

You can check the issue correctly from below video. https://www.screencast.com/t/0MLoafdls

Thanks in advance

Acode
  • 507
  • 5
  • 14
  • 1
    I haven't used react-beautiful-dnd but aren't there onDrag, onDragStart, onDragEnd events as in pure JS? If so, you could toggle the overflowY value in those events and so during dropping the element the board has no overflow but right after you enable it and auto scroll to the point you need. Something along those lines I guess. – George Makroglou Jun 26 '22 at 04:27
  • @GeorgeMakroglou, Thanks for your reply, react-beautiful-dnd has event handlers such like onDragStart, onDragUpdate, onDragEnd. But these functions has param regarding index, old & new position in the column, and there is no info about Mouse pointer position. Do we have only solution to add event listener while dragging? – Acode Jun 27 '22 at 15:09
  • 1
    Well, you don't really need the position if you think about it. onDragStart, you disable the overflow of your droppable. Then, you drop your draggable and re-enable overflow so you can auto-scroll. Yeah drag events is your best bet I guess. In native drag events you can pass information to your draggable to transfer to the droppable copy, but I'm not sure those exist in react-beautiful-dnd. You can play with state for sure though. – George Makroglou Jun 27 '22 at 16:01
  • I am not sure about disabling/re-enabling the autoflow - auto scrolling is only working for 1 level - so, to moving columns inside board & moving items inside column is working good, but the main problem that I pointed out is when dragging item inside the board, so there are 2 level of droppable area, and it's not supported in beautiful dnd – Acode Jun 27 '22 at 16:35
  • 1
    Oh ok, I checked the link. Now I get it. Doesn't your listeners provide access to the event itself? Take a look at this storybook they have: https://react-beautiful-dnd.netlify.app/iframe.html?id=virtual-react-window--board . It has the funcitonality you are looking for. Digging up the github repository with the examples will probably show you what you are missing. Check here specifically https://github.com/atlassian/react-beautiful-dnd/blob/master/stories/src/virtual/react-virtualized/board.jsx – George Makroglou Jun 27 '22 at 16:50
  • Thanks, but I know about it, and its one level of scrolling, it has only 1 scrollbar for entire board, not for individually - for board & for columns https://prnt.sc/9vuIFGqzsoql – Acode Jun 27 '22 at 16:56
  • If I move columns inside the board, the horizontal auto scroll is working good, and we dont need vertical auto scrolling for this – Acode Jun 27 '22 at 16:57
  • If I move items inside columns, vertical auto scrolling is working good, but if I move item inside the board globally, the horizontal auto scrolling should be enabled, but its not working, that's my problem – Acode Jun 27 '22 at 16:58
  • 1
    In the example that I sent you, if you minimize your window to create window overflow on the y-axis, you'll see that you'll still be able to drag your cards to the hidden part of the screen. – George Makroglou Jun 27 '22 at 17:00
  • https://www.screencast.com/t/DOwVfsXmqA This is the solution that this example supports, but I need functionality exactly same as trello board, please check this video about what trello does https://www.screencast.com/t/fWo3W69Pk – Acode Jun 27 '22 at 17:04
  • https://www.screencast.com/t/LWpNqwwh, also you can see the issue from this video, - If I drag items inside column, the entire board is scrolling vertically that I dont want .. – Acode Jun 27 '22 at 17:06
  • Yes, it's exactly the same. You grab a card and you auto scroll to parts that are not visible in your screen. If you check their github repo you'll see what is going wrong. Maybe you've set some overflow on the window yourself or something like that. – George Makroglou Jun 27 '22 at 17:06
  • Yup basically, it's working - its moving to the area that's not visible, but as I mentioned, if I drag item inside the column, auto scroll for entire board is working - it should be only scrolling inside certain column, Multi auto scroll is required in order to fix this issue, I hope my comments would help your understand, thanks – Acode Jun 27 '22 at 17:10
  • 1
    Give your columns a fixed height so they don't cause a window overflow and you'll only scroll inside the columns. Your first video was showing that you can't move horizontally. – George Makroglou Jun 27 '22 at 17:12
  • Yes, my first video shows disabled auto scrolling when dragging items for entire board, but auto scrolling is working when dragging columns for entire board because it has 1 level of droppable container – Acode Jun 27 '22 at 17:14

1 Answers1

0

After struggling in order to resolve this issue, I turned out to use another dnd library - https://dndkit.com/, it resolved all the issues that I had in react-beautiful-dnd

Acode
  • 507
  • 5
  • 14