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

admin管理员组

文章数量:1401964

I've been trying to find an answer to this for a while now and the library, while being very nice and well done... lack very much in clear documentation. I'm hoping to partipate in improving it once I get a clear understanding of it.

Here's what I'm trying to acplish.

I have a hierarchy of object that is quite plex and multiple draggable type can be mixed in the same level and some of these can even have childrens that are these same dragable.

That render the "type" property not working for me. I want to bine "IsDropDisabled" with "draggingOverWith" to make it happen instead and manage the plexity there.

Basically, the idea is that when the item I'm currently dragging is passing "over" a potential dropable, I want to check the type against an "allowed" array of type and allow it if the type is right.

For that, I want to access "snapshot.draggingOverWith" from the Droppable but the issue is... that "IsDropDisabled" is above in the code hierarchy so I'm kinda of lost as to how the code in the library actually does that parison.

The idea would be something like that:

<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>

Thanks for helping.

I've been trying to find an answer to this for a while now and the library, while being very nice and well done... lack very much in clear documentation. I'm hoping to partipate in improving it once I get a clear understanding of it.

Here's what I'm trying to acplish.

I have a hierarchy of object that is quite plex and multiple draggable type can be mixed in the same level and some of these can even have childrens that are these same dragable.

That render the "type" property not working for me. I want to bine "IsDropDisabled" with "draggingOverWith" to make it happen instead and manage the plexity there.

Basically, the idea is that when the item I'm currently dragging is passing "over" a potential dropable, I want to check the type against an "allowed" array of type and allow it if the type is right.

For that, I want to access "snapshot.draggingOverWith" from the Droppable but the issue is... that "IsDropDisabled" is above in the code hierarchy so I'm kinda of lost as to how the code in the library actually does that parison.

The idea would be something like that:

<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>

Thanks for helping.

• javascript
• reactjs
• react-beautiful-dnd

Share Improve this question Follow asked May 22, 2021 at 3:38 Johnny PrescottJohnny Prescott 27111 gold badge99 silver badges2424 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5 +50

I think you could try to use the onDragStart method from the DragDropContext and send required information to Droppable for isDropDisabled to work conditionally.

Like they do here on their egghead course video.

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

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

and

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

lastly, in your Droppable use that as value

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

本文标签： javascriptReactDnD Using IsDropDisabled to disable dropping wrong element typeStack Overflow