如何在react-beautiful-dnd中禁用一项的可拖动属性

如何解决如何在react-beautiful-dnd中禁用一项的可拖动属性

我正在使用打字稿react-beautiful-dnd将项目从一个容器拖放到另一容器和viseversa。 在一个容器中有用户名，而另一个容器中只有一个名为“未分配”的名称。 以下是数据外观。

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' },content: 'third Task' },content: 'fourth Task' },content: 'fifth Task' },content: 'sixth Task' },content: 'seven Task' },];

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

但是我的要求是将“未分配”的拖动属性从Final容器限制为Todo容器。但允许待办事项拖放到最终容器，反之亦然。

使用挂钩和功能组件方法。 我尝试使用isDragdisabled属性，但该属性禁用了两个容器中所有项目的可拖动性。

下面是我的代码。

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>
  );
}

预先感谢