React-DnD:使用IsDropDisabled禁止删除错误的元素类型

Question

我已经尝试寻找这个问题的答案已经有一段时间了，而且我的库也做得很好……非常缺乏清晰的文档。我希望一旦我对它有了一个清晰的理解，我就会参与改进它。

这是我想要实现的目标。

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

这使得"type“属性对我不起作用。我想把"IsDropDisabled“和"draggingOverWith”结合起来，让它发生，并管理那里的复杂性。

基本上，我的想法是，当我当前拖动的项目“经过”一个潜在的dropable时，我想要根据一个“允许”的类型数组检查类型，如果类型正确，就允许它。

为此，我想从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>