100terres
commented
3 years ago Thank you @cmacdonnacha for opening this issue. I’ll have a look into it, once I’ve migrated the codebase to TypeScript. :slightly_smiling_face:
Open cmacdonnacha opened 3 years ago
100terres
commented
3 years ago Thank you @cmacdonnacha for opening this issue. I’ll have a look into it, once I’ve migrated the codebase to TypeScript. :slightly_smiling_face:
cmacdonnacha
commented
3 years ago Excellent thanks @100terres. The main discussion and design plan is in this issue: https://github.com/atlassian/react-beautiful-dnd/issues/131. Thanks again for taking the time to lead the way on continuing on this awesome library!
darkowic
commented
3 years ago FYI: https://github.com/atlassian/react-beautiful-dnd/issues/131#issuecomment-635862957
a few weeks ago when I encountered the problem in my side project I dived into the source code and I found there is a function that is looking for closest scroll parent. The scrolling is performed either on the window or on that scroll parent. If we could detect all scroll parents and put into an array, then scroll each step by step (depending on where the mouse pointer is) we could achieve expected behavior.
I need that feature too. I would be happy to help.
Is there any slack/discord or another communicator for this project?
olegcherr
commented
3 years ago Waiting for solution as well...
BigLizardz
commented
2 years ago Any updates on this? or at least a way to remove the warning
alex-titarenko
commented
1 year ago This is a critical issue, any updates on this?
abhishekpolampally
commented
1 year ago Any updates on this, I am able to scroll the container by using the mouseMove attribute on the scroll container, but the drag and drop feature doesn't work for the any region except the columns which were in the viewport before the scroll. How can I inform the library that the list has scrolled horizontally
tim-hub
commented
1 year ago How is it this going?
abdullahzt
commented
1 year ago I solve this by wrapping my scrollable div inside the Droppable by another div, and passing these:
<div ref={provided.innerRef} {...provided.droppableProps}>
Mokshda14
commented
1 year ago I solve this by wrapping my scrollable div inside the
Droppableby another div, and passing these:<div ref={provided.innerRef} {...provided.droppableProps}>
Could you please send whole sample.
abdullahzt
commented
1 year ago Could you please send whole sample.
Previously I had this:
<Droppable
droppableId={s}
isDropDisabled={isDisabled && !isCurrentSource}
>
{(provided: DroppableProvided) => (
<CssScrollerDiv
{...scrollDivProps}
ref={(e) => {
scrollDivProps.ref(e)
provided.innerRef(e)
}}
style={{
minHeight: 300,
maxHeight: 650,
padding: 8,
rowGap: 4,
display: 'flex',
flexDirection: 'column',
...getDroppableStyles(
ticketTicketStatusChoicesColorMap1[s]?.secondary || ``,
droppableState || undefined
),
}}
defaultYScroller
{...provided.droppableProps}
>
{tickets?.map((ticket: $TSFixMe, i: number) => (
<ListItem
key={ticket.id}
id={ticket.id}
index={i}
isDragDisabled={isDisabled}
>
{(p) => (
<div {...p}>
<TicketCard
node={ticket}
cardProps={{
onClick: () => onTicketClick(ticket.id),
}}
/>
</div>
)}
</ListItem>
))}
{provided.placeholder}
{((loading && !tickets.length) || loadingMore) && (
<Skeleton style={{ marginTop: offset === 0 ? 0 : '1rem' }} />
)}
</CssScrollerDiv>
)}
</Droppable>I converted it to this:
<Droppable
droppableId={s}
isDropDisabled={isDisabled && !isCurrentSource}
>
{(provided: DroppableProvided) => (
<div ref={provided.innerRef} {...provided.droppableProps}>
<CssScrollerDiv
{...scrollDivProps}
ref={(e) => {
scrollDivProps.ref(e)
}}
style={{
minHeight: 300,
maxHeight: 650,
padding: 8,
rowGap: 4,
display: 'flex',
flexDirection: 'column',
...getDroppableStyles(
ticketTicketStatusChoicesColorMap1[s]?.secondary || ``,
droppableState || undefined
),
}}
defaultYScroller
>
{tickets?.map((ticket: $TSFixMe, i: number) => (
<ListItem
key={ticket.id}
id={ticket.id}
index={i}
isDragDisabled={isDisabled}
>
{(p) => (
<div {...p}>
<TicketCard
node={ticket}
cardProps={{
onClick: () => onTicketClick(ticket.id),
}}
/>
</div>
)}
</ListItem>
))}
{provided.placeholder}
{((loading && !tickets.length) || loadingMore) && (
<Skeleton style={{ marginTop: offset === 0 ? 0 : '1rem' }} />
)}
</CssScrollerDiv>
</div>
)}
</Droppable>So basically the div directly inside Droppable had overflow-y init, I just wrapped that with a div
akbarsatrio
commented
7 months ago Could you please send whole sample.
Previously I had this:
<Droppable droppableId={s} isDropDisabled={isDisabled && !isCurrentSource} > {(provided: DroppableProvided) => ( <CssScrollerDiv {...scrollDivProps} ref={(e) => { scrollDivProps.ref(e) provided.innerRef(e) }} style={{ minHeight: 300, maxHeight: 650, padding: 8, rowGap: 4, display: 'flex', flexDirection: 'column', ...getDroppableStyles( ticketTicketStatusChoicesColorMap1[s]?.secondary || ``, droppableState || undefined ), }} defaultYScroller {...provided.droppableProps} > {tickets?.map((ticket: $TSFixMe, i: number) => ( <ListItem key={ticket.id} id={ticket.id} index={i} isDragDisabled={isDisabled} > {(p) => ( <div {...p}> <TicketCard node={ticket} cardProps={{ onClick: () => onTicketClick(ticket.id), }} /> </div> )} </ListItem> ))} {provided.placeholder} {((loading && !tickets.length) || loadingMore) && ( <Skeleton style={{ marginTop: offset === 0 ? 0 : '1rem' }} /> )} </CssScrollerDiv> )} </Droppable>I converted it to this:
<Droppable droppableId={s} isDropDisabled={isDisabled && !isCurrentSource} > {(provided: DroppableProvided) => ( <div ref={provided.innerRef} {...provided.droppableProps}> <CssScrollerDiv {...scrollDivProps} ref={(e) => { scrollDivProps.ref(e) }} style={{ minHeight: 300, maxHeight: 650, padding: 8, rowGap: 4, display: 'flex', flexDirection: 'column', ...getDroppableStyles( ticketTicketStatusChoicesColorMap1[s]?.secondary || ``, droppableState || undefined ), }} defaultYScroller > {tickets?.map((ticket: $TSFixMe, i: number) => ( <ListItem key={ticket.id} id={ticket.id} index={i} isDragDisabled={isDisabled} > {(p) => ( <div {...p}> <TicketCard node={ticket} cardProps={{ onClick: () => onTicketClick(ticket.id), }} /> </div> )} </ListItem> ))} {provided.placeholder} {((loading && !tickets.length) || loadingMore) && ( <Skeleton style={{ marginTop: offset === 0 ? 0 : '1rem' }} /> )} </CssScrollerDiv> </div> )} </Droppable>So basically the div directly inside
Droppablehad overflow-y init, I just wrapped that with a div
thank you very much! ur comment solve my problem.
Great idea to fork the dnd project! This has been raised a couple of times in the old repo so I think it would be a great first bug to fix. Basically horizontal scrolling doesn't work when you drag an item to the edge of the screen. It only appears to be an issue when the columns are also using vertical scrolling.