React-beautiful-dnd: Render drop placeholder for dragged item

[svrcekmichal]

Hey guys. First of all, thanks for all the work done in this lib. I previously used react-dnd in my project and switched most of it immediately when I found this in my dev branch. I'm missing only last single feature and that's rendering placeholder where dragged item will be dropped. Are you considering even this feature to be added into the lib or is it currently possible to do something like that?

Right know I was only able to render provided placeholder to prevent removing of initial space of dragged item, but after that it's gone. Let me know, what you think. If you want that, maybe I can try to do PR with feature, or at leasst will try.

[jaredcrowe]

Hey @svrcekmichal, just to clarify your question - are you referring to the common drag-and-drop UX pattern of highlighting the area where the dragging item will land if it's dropped? If that's what you're referring to, then no we don't currently support this feature and it's not on our roadmap right now. From the readme:

Drop shadows are useful in an environment where items and their destinations snap around. However, with react-beautiful-dnd it should be obvious where things will be dropping based on the movement of items. This might be changed in the future - but the experiment is to see how far we can get without any of these affordances.

So right now this isn't something we plan on implementing. Hopefully this reasoning is satisfactory for you application as well 🙂

[svrcekmichal]

Yes, that's what I need. I understand your view, but I can't live without that. There are cases where I found this to be required. For example your board example, if it looks something like this

| column1 | column2 | column3 | column4 |
|---------|---------|---------|---------|
| card    |         |         | card    | 
| card    |         |         |         | 
| card    |         |         |         | 

when dragging from column1 I need to show if it's droppping to column2 or column3, since there's no animation of cards. Anyway great job done, I'll fork your lib and try to implement the feature myself, and if you found it usefull I can create PR later. I believe this should be not harded then reuse few already implemented things like placeholder and styles from not dragged columns.

[svrcekmichal]

I believe this should be not harded then reuse few already implemented things like placeholder and styles from not dragged columns.

I couldn't have been more wrong :D anyway, will fight with this :)

[jaredcrowe]

Haha best of luck with it :) FYI it is possible to highlight the column that you're dragging over (we do this in our stories) so you could indicate to the user whether they're dropping in column 2 or 3 that way.

[otech47]

+1 on this request for just adding a simple shaded area where it will be dropped. It is a good point that it is obvious where the card will be dropped so it's not necessary to shade, but it's pretty much a nice-to-have. @svrcekmichal Lemme know if you made any progress implementing this!

[shakhbulatgaz]

So, iiuc, currently there is no way to edit the style of placeholders, right?

[svrcekmichal]

@otech47 sorry for late reply. I made no progress in this, when I talked with designers and PM/POs we decided to go with different approach, so I stopped working on this

[pchodak]

Any change?