React-DnD：使用 IsDropDisabled 禁用丢弃错误的元素类型

Question

一段时间以来，我一直在努力寻找这个问题的答案和图书馆，虽然非常好，做得很好......非常缺乏清晰的文档。我希望在清楚地了解它后参与改进它。

这是我想要完成的。

我有一个非常复杂的对象层次结构，多个可拖动类型可以混合在同一级别中，其中一些甚至可以有相同可拖动的子对象。

使“类型”属性对我不起作用。我想结合使用“IsDropDisabled”和“draggingOverWith”来实现它并管理那里的复杂性。

基本上，我的想法是，当我当前拖动的项目“越过”一个潜在的可放置项时，我想根据“允许”的类型数组检查类型，如果类型正确则允许它.

为此，我想从 Droppable 访问“snapshot.draggingOverWith”，但问题是......“IsDropDisabled”在代码层次结构的上方，所以我有点迷茫库中的代码实际上进行了比较。

这个想法是这样的：

<Droppable droppableId={props.verticalgroup.id} isDropDisabled={() => {CompareTypes(snapshot.draggingOverWith, ['Type1', 'Type3'])}>
    {(provided, snapshot) => (
        <div
            {...provided.droppableProps}
            ref={provided.innerRef}
            className={snapshot.isDraggingOver ? 'changeBackground' : ''}
        >
            ...[Other Code]
        </div>
    )}
</Droppable>

感谢您的帮助。

Answer 1

我认为您可以尝试使用 DragDropContext 中的 onDragStart 方法并将所需信息发送到 Droppable 以便 isDropDisabled 有条件地工作。

就像他们在 egghead course video 上所做的那样。

const [isDropDisabled, setIsDropDisabled] = useState(false);

const onDragStart = (task) => {
  setIsDropDisabled(task.something === 'xyz') // <= your condition goes here
}

和

<DragDropContext onDragStart={this.onDragStart} ...>
  ...
</DragDropContext>

最后，在您的 Droppable 中使用它作为值

<Droppable droppableId={props.verticalgroup.id} isDropDisabled={isDropDisabled}>
    {(provided, snapshot) => (
        <div
            {...provided.droppableProps}
            ref={provided.innerRef}
            className={snapshot.isDraggingOver ? 'changeBackground' : ''}
        >
            ...[Other Code]
        </div>
    )}
</Droppable>

React-DnD：使用 IsDropDisabled 禁用丢弃错误的元素类型

React-DnD: Using IsDropDisabled to disable dropping wrong element type

javascript

reactjs

react-beautiful-dnd