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

Question

我使用typescript 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' },
{ 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' }
]
}
};

但我的要求是限制"Unassigned"的拖动属性从Final容器到Todo容器。但允许todo项目在Final容器中拖放，反之亦然。

我使用钩子和函数组件的方法。我尝试使用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'}
>