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

Question

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

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' }
    ]
  }
};

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

我正在使用钩子(Hook)和函数组件方法。 我尝试使用 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>
  );
}

提前致谢

Answer 1

为了禁止某个元素的拖拽，需要设置的是他

isDragDisabled={true}

保留其余元素

isDragDisabled={false}

在你的代码中，你只需要设置条件

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