CODEWITHSUNDEEP
reactjsreact-dnd
Learn to code
Learn to code

Reputation: 183

React DnD make dropTargets when hover on something while dragging item

I'm trying to do something like below:

enter image description here

Scenario 1: User will drag and drop List 1 from left side to right side.

Scenario 2: Again, User will drag list 2 to right side, when that dragging item hover on list 1, have to show drop zones to drop that list 2 item here.

Finally, List 1 and List 2 both will be placed like left and right side.

With React Dnd, Is this achievable? and I tried this it works only while dragging. https://stackblitz.com/edit/react-pctpdh

I'm able to show a drop area while dragging, it shows every time, but I need to show that drop area only hover on some item.

Below is the sample work, I have to achieve:

enter image description here

Need to show placeholder to drop an item while hover other items to drop. (Need to Create dynamic drop targets while mouse hover some item)

I need a help on this to achieve this feature.Any idea on this really commendable.

Upvotes: 1

Views: 6274

Answers (1)

Vlad Bîcu
Vlad Bîcu

Reputation: 1358

I saw the code snippet and i added some new code that replicates your desired behavior.

The idea is to create a separate component to handle drop actions, that can be reused when is needed. In this particular case, I choose to use the component inside your ListItem component to create two drop zones on both sides.

Here is the updated code: https://stackblitz.com/edit/react-pctpdh

Upvotes: 1

Related Questions