how to disable draggable property for one item in react-beautiful-dnd

Question

I am using typescript react-beautiful-dnd to drag and drop items from one container to other container and viseversa. In one container there are user names and other container has only one name called "Unassigned". Below are the data looks.

import React, { useState } from 'react';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
import { v4 } from 'uuid';

const itemsFromBackend = [
  { id: v4(), content: 'First Task' },
  { id: v4(), content: 'Second Task' },
  { id: v4(), content: 'third Task' },
  { id: v4(), content: 'fourth Task' },
  { id: v4(), content: 'fifth Task' },
  { id: v4(), content: 'sixth Task' },
  { id: v4(), content: 'seven Task' },
];

const columnsFromBackend = 
{
  [v4()]: {
    name: "Todo",
    items: itemsFromBackend
  },
  [v4()]: {
    name: "Final",
    items: [
      { id: v4(), content: 'Unassigned' }
    ]
  }
};

But my requirement is to restrict drag property for 'Unassigned' from Final container to Todo container. but allow todo items to drag and drop at Final container and viceversa.

i m using hooks and function component approach. I tried to use isDragDisabled property but it disable draggable to all the items in both containers.

Below is my code.

function App() {
  const [columns, setColumns] = useState(columnsFromBackend);
  return (
    <div style={{ display: 'flex', justifyContent: 'center' }}>
      <DragDropContext onDragEnd={result => onDragEnd(result, columns, setColumns)}>
        {Object.entries(columns).map(([id, column]) => {
          return (
            <div style={{ margin: 8}}>
              <h3>{column.name}</h3>
              <Droppable droppableId={id} key={id}>
                {(provided, snapshot) => {
                  return (
                    <div
                      {...provided.droppableProps}
                      ref={provided.innerRef}
                      style={{
                        background: snapshot.isDraggingOver ? 'lightblue' : 'lightgrey',
                        padding: 4,
                        width: 250,
                        minHeight: 500,
                        maxHeight: 500,
                        overflowY: "scroll"
                      }}
                    >
                      {id}
                    {column.items.map((item, index) => {
                      return (
                        <Draggable 
                          key={item.id} 
                          draggableId={item.id} 
                          index={index}
                          isDragDisabled={false}
                        >
                          {(provided, snapshot) => {
                            return (
                              <div
                                ref={provided.innerRef}
                                {...provided.draggableProps}
                                {...provided.dragHandleProps}
                                style={{
                                  userSelect: 'none',
                                  padding: 16,
                                  margin: '0 0 8px 0',
                                  minHeight: '20px',
                                  backgroundColor: snapshot.isDragging ? '#263B4A' : '#456C86',
                                  color: 'white',
                                  ...provided.draggableProps.style
                                }}
                              >
                                {item.content}
                              </div>
                            )
                          }}
                        </Draggable>
                      )
                    })}
                    {provided.placeholder}
                    </div>
                  )
                }}
              </Droppable>
            </div>
          )
        })}
      </DragDropContext>
    </div>
  );
}

Thanks in advance

Richart

Answer 1

In order to prohibit the dragging of a specific element, it is he who needs to set

isDragDisabled={true}

Leave the rest of the elements

isDragDisabled={false}

In your code, you just need to set the condition

                    <Draggable 
                      key={item.id} 
                      draggableId={item.id} 
                      index={index}
                      isDragDisabled={item.content === 'Unassigned'}
                    >

Remodel