I'm currently working on a kanban board where both the columns of cards can be scrolled left and right, and the cards within them can be scrolled up and down.
Here's a screenshot of what I mean:
Dragging and dropping worked fine for almost all cases, except for when a card was dragged from one column to the very bottom of another column on the verge of needing to scroll, meaning that the newly added card would cause a scrollbar to appear. The issue in this case was that the scrollable/droppable container's height would not be increased enough to accomodate the new card, which would further cause the 'autoscroll' feature to be jumpy.
After digging through the source code a little bit, the fix I came up with came down to this line in container.ts (line 412):
My question is: what is the intention of the elementSize + lastDraggableEnd - containerEnd calculation? Keep in mind I haven't dug too much into the logic itself, but at a glance it seems like a roundabout way of re-calculating elementSize. And wouldn't it always be desirable to increase the droppable container's height by the size of the element? Maybe there's a use case I am missing but that's why I am asking.
I'm currently working on a kanban board where both the columns of cards can be scrolled left and right, and the cards within them can be scrolled up and down.
Here's a screenshot of what I mean:
Dragging and dropping worked fine for almost all cases, except for when a card was dragged from one column to the very bottom of another column on the verge of needing to scroll, meaning that the newly added card would cause a scrollbar to appear. The issue in this case was that the scrollable/droppable container's height would not be increased enough to accomodate the new card, which would further cause the 'autoscroll' feature to be jumpy.
After digging through the source code a little bit, the fix I came up with came down to this line in container.ts (line 412):
const stretcherSize = draggables.length > 0 ? elementSize + lastDraggableEnd - containerEnd : elementSize;The following change made it work perfectly:
const stretcherSize = elementSize;My question is: what is the intention of the
elementSize + lastDraggableEnd - containerEndcalculation? Keep in mind I haven't dug too much into the logic itself, but at a glance it seems like a roundabout way of re-calculatingelementSize. And wouldn't it always be desirable to increase the droppable container's height by the size of the element? Maybe there's a use case I am missing but that's why I am asking.Thanks in advance!