2

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>
    </>
  );
}
Arthur
  • 3,056
  • 7
  • 31
  • 61

0 Answers0