React Beautiful DND - Disable Drag

React Beautiful DND is a powerful and flexible library that allows you to implement drag and drop functionality in your React applications. By default, users are able to drag and drop items within a list or between lists. However, there may be cases where you want to disable the drag functionality for certain items.

In order to disable drag for specific items, you can make use of the isDragDisabled prop provided by React Beautiful DND. This prop allows you to control whether an item can be dragged or not. By setting isDragDisabled to true, you can disable the drag functionality for the desired item.

Here's an example of how you can disable drag for an item using React Beautiful DND with TypeScript:

import { Draggable, Droppable } from 'react-beautiful-dnd';

// Component code

const Item = ({ id, content, isDragDisabled }: { id: string, content: string, isDragDisabled: boolean }) => {
  return (
    <Draggable draggableId={id} index={index} isDragDisabled={isDragDisabled}>
      {(provided) => (
        <div
          ref={provided.innerRef}
          {...provided.draggableProps}
          {...provided.dragHandleProps}
          style={{ backgroundColor: isDragDisabled ? 'lightgray' : 'white' }}
        >
          {content}
        </div>
      )}
    </Draggable>
  );
};

const List = ({ items }: { items: { id: string, content: string, isDragDisabled: boolean }[] }) => {
  return (
    <Droppable droppableId="list">
      {(provided) => (
        <div ref={provided.innerRef} {...provided.droppableProps}>
          {items.map((item, index) => (
            <Item key={item.id} id={item.id} content={item.content} isDragDisabled={item.isDragDisabled} />
          ))}
          {provided.placeholder}
        </div>
      )}
    </Droppable>
  );
};

// Usage:

const items = [
  { id: 'item-1', content: 'Item 1', isDragDisabled: false },
  { id: 'item-2', content: 'Item 2', isDragDisabled: true },
  { id: 'item-3', content: 'Item 3', isDragDisabled: false },
];

const App = () => {
  return (
    <div>
      <h1>Draggable List</h1>
      <List items={items} />
    </div>
  );
};

export default App;

In the above code snippet, we have a List component that renders a list of items. Each item is rendered as a Item component, which is wrapped inside a Draggable component. The isDragDisabled prop is passed to the Draggable component, controlling whether an item can be dragged or not.

By setting isDragDisabled to true for the second item in the items array, we disable the drag functionality for that item. This is indicated visually by changing its background color to light gray.

Please note that this is just a basic example showcasing the concept of disabling drag using React Beautiful DND with TypeScript. You can further customize the styling and behavior of the draggable items based on your requirements.