The same question on Github - https://github.com/atlassian/react-beautiful-dnd/issues/1712
Question:
Is it possible to handle isDraggingOver
when isDropDisabled
is true? I want to highlight the list with red border when it's closed.
Codesandbox - https://codesandbox.io/s/loving-bush-kz3b1
Code:
For example we have two lists
import cn from "classnames"
const Lists = () => {
const [isCollapsed, setIsCollapsed] = useState([false, false]);
return (
<>
<Droppable droppableId="droppable-1" isDropDisabled={isCollapsed[0]}>
{(provided, snapshot) => (
<section className={cn({
"dragging-over": snapshot.isDraggingOver,
"dragging-over-collapsed": snapshot.isDraggingOver && isCollapsed[0]
})}>{/*...items...*/}</section>
)}
</Droppable>
<Droppable droppableId="droppable-2" isDropDisabled={isCollapsed[1]}>
{(provided, snapshot) => (
<section className={cn({
"dragging-over": snapshot.isDraggingOver,
"dragging-over-collapsed": snapshot.isDraggingOver && isCollapsed[0]
})}>{/*...items...*/}</section>
)}
</Droppable>
</>
);
}