react-beautiful-dnd icon indicating copy to clipboard operation
react-beautiful-dnd copied to clipboard

When I drags a <Draggable /> near the edge of a container,it can't automatically scroll the container,

Open sugarZhang415 opened this issue 3 years ago • 1 comments

I use 'react-window' with VariableSizeList。When I drags a <Draggable /> near the edge of a container,it can't automatically scroll the container,

Here is my code, Droppable's contnet:

`import React, {useCallback, useRef, useMemo} from 'react' import {VariableSizeList} from 'react-window' import AutoSizer from 'react-virtualized-auto-sizer'

import KanbanItem from '../kanban-item' import SelfStyle from '../../style.module.less'

export default React.memo(props => { const {listData, provided} = props const maxListCount = listData.length

const rowHeights = useRef({}) const listRef = useRef({})

const getRowHeight = index => { return rowHeights.current[index] || 50 }

const setRowHeight = useCallback((index, size) => { listRef.current?.resetAfterIndex(0) rowHeights.current = {...rowHeights.current, [index]: size} }, [])

const itemData = useMemo(() => ({setRowHeight, listData}), [setRowHeight, listData])

return ( <div className={SelfStyle['kanban-group-content']} ref={provided.innerRef} style={{height: '100%'}} > <AutoSizer> {({height, width}) => ( <VariableSizeList height={height} width={width} className={SelfStyle['kanban-list']} itemData={itemData} itemCount={maxListCount} itemSize={getRowHeight} estimatedItemSize={80} ref={listRef} > {KanbanItem} </VariableSizeList> )} </AutoSizer> ) })`

sugarZhang415 avatar Mar 16 '22 03:03 sugarZhang415

I got the same issue, refer to this sandbox Any suggestion or solution?

trend-alan-bie avatar Jan 02 '24 09:01 trend-alan-bie