Suggestion: Allow placeholder when target array is empty

[GregPeden]

Just an idea... it would be swell to be able to allow placeholder, perhaps provided as a named slot, which is displayed only when the target array is empty. As soon as an item is dragged in to the 'draggable' field, even before released, the placeholder is no longer rendered. This would appear like the first element being added is going to replace the placeholder upon release.

So one can imagine a note like "drop here to add things" with an infographic icon being in place of nothingness. This secondarily resolves the issue of maintaining a minimum height of the HTML element to allow use when empty.

This past issue discusses a similar need:
#335

[David-Desmaisons]

In terms of API, using a named slot would totally makes senses. I like this proposal.
I will have to take a carefull look to check if this is doable.

[ThePendulum]

It would be convenient to be able to add this placeholder anywhere, not just inside of the target list, and make its disappearance optional, so it also addresses #457 more adequately.

[satvikpendem]

I would also second this, especially for nested components.

[madebycaliper]

Any news on this? @David-Desmaisons has this made it into your roadmap for a future version?

[David-Desmaisons]

@madebycaliper still have no good idea on how to implement such a feature. I should not be abble to deliver it in the short/mid term.

[madebycaliper]

@David-Desmaisons thanks for the reply. it seems like a complex feature!

[Doogiemuc]

Think out of the box. You have VUE at hand :-)

    <draggable v-model="list" .....>
       <div v-for="elem in list" :key="elem.order">These are your normal sorted elems</div>
       <p v-if="list.length==0" key="4711">This is shown when container is empty</p>
     </draggable>

(Ok you need a dummy key 4711.)

[David-Desmaisons]

@dominiczaq Well your sample is exactly an example that IS NOT WORKING, because vue.draggable needs the inner children to map the list

[madebycaliper]

@Doogiemuc yea, I've implemented a working solution a number of times, as I use this component in a bunch of projects and had to figure it out. But I think having something standardized that's built into the component itself would make it easier to implement and more future-proof

[David-Desmaisons]

@madebycaliper what is your work-around?

[itaishopen]

@David-Desmaisons I have a solution that works with some glitches
<draggable class="listgroup" :class="list._id" v-model="listArray" v-bind="dragOptionsCard" @EnD="funToMove">

listArray: this.cardList,

cardList() {
if (!this.list.cards && this.list.cards.length === 0) {
this.list.cards = []
}
return this.list.cards
},

if you have an empty list the function cardList in computed return an empty list for you to enter the cards in to.
in css i gave the empty list a min height of 50 px
.listgroup {
cursor: move;
min-height: 50px;
}

that fixed most of the bugs for me

[Doogiemuc]

I totally agree with madebycaliper: There should be a standard solution in Vue.draggable.
My "workaround" is working fine as far as I tested it: https://codepen.io/Doogie/pen/qvwjGE

[David-Desmaisons]

@Doogiemuc I agree. Still looking for a reliable solution.

[madebycaliper]

@David-Desmaisons I often use Vuex to fire a DRAG_START and DRAG_END event and then map state and modify the dimensions of the empty Draggable using CSS. I've also tried :

• a computed property somewhere in the component that recognizes when the list is empty and defaults the min-height to more than 0px
• applying a min-height style at all times
• used an::after{} CSS declaration to mock a "drag here" kind of region.

There are oviously lots of custom tactics available, but it would be great if you offered a standardized solution and some supporting logic.

@SirLamer I definitely like the idea of a named slot, as it would be optional and unobtrusive. If the Draggable component could just conditionally show that slot based on items.length, we could pass an element that would extend the list height if it's empty.