Support custom placeholder

[SimchaShats]

Custom placeholder

There are in documentation a lot of examples with using placeholder like:

{provided.placeholder}

But it doesn't work, I saw that it was moved inside of library to add it automatically, but now there is no way to manage placeholder from outside, for example if I want to put custom placeholder like: Drop it here

Is it possible to add functionality to support custom placeholder?

P.S. I think the best way, just to pass property with React element and put it instead of empty placeholder.

Thanks.

[SimchaShats]

Hi @alexreardon Do you think it's possible to do?

[alexreardon]

It is not straight forward to add as we currently do not move the placeholders in the lists. We may consider adding this at some point but it is not on our immediate roadmap

[ducdigital]

It would be awesome if there's support for this.

[O4epegb]

I think would be enough if you could disable default placeholder altogether and provide some sort of info about where you should place it, if you want to. Maybe indexes of items in between or something like that.

[alexreardon]

You 'technically' could do this today if you have fixed sized items and you leaned on the onDragUpdate hook to know where the drop target is. Although managing the shadow by yourself will get crazy complex across multiple lists

Here be dragons!

[SimchaShats]

I tried to add my custom placeholder instead of shadow placeholder, but issue that my placeholder should be higher than regular item, and if increase hight of shadow placeholder it break scroll functionality in the list...

[alexreardon]

You will probably want to use position:absolute to position it.

Just a reminder: this is not currently supported - i just offered a suggestion. I'll be removing myself from this convo for now

[SimchaShats]

Yep but inside item, I have div that include 2 items: regular and placeholder under it and switch from one to another when user drag this particular item, I think it works for same size placeholder but for placeholder with other height - no.

[visualcookie]

Any update on this?

I have a use-case right now, that there should be no blank space, but an empty element with a dashed border the height of the dragged element.

[pdrbrnd]

@visualcookie did you manage to make that dashed placeholder work?

[visualcookie]

@visualcookie did you manage to make that dashed placeholder work?

@pbrandone Nope, still no idea how I would do that. :D

[nramamurth]

@pbrandone Were you able to have a custom placeholder? I am having a very similar use-case with two vertical lists stacked one above the other and I'd like to have a custom placeholder that is similar to what is being shown in the image below:

https://cdn-images-1.medium.com/max/1600/1*kUl5sYqeMgbCwaYJWCVS2w.gif

cc @alexreardon

[pdrbrnd]

@nramamurth unfortunately no

[prakashsvmx]

+1