Vue.draggable: Can't drag into empty list with footer

[MarcelloTheArcane]

Jsfiddle link

It happens in the live demo, does that count?

Step by step scenario

I am trying to drag from one list into another empty list, but it doesn't let me. I know about setting a min-height, but my <draggable> elements have a footer, so I'm not sure what element I am supposed to set a min-height to, since the <draggable> has a non-zero height already.

Here is a demonstration using the docs:

I expect to be able to drag into an empty list that has a footer.

[xlanex6]

@MarcelloTheArcane
You should use props :emptyInsertThreshold="100" for 100px on your draggable comp.

You can insert on empty array, and the mouse will be reactive at 100 px, change value as you want...

works fine for me, here 's my exemple

``` html
:list="messages"
group="composer"
v-bind="dragOptions"
:emptyInsertThreshold="500"
@start="drag = true"
@end="drag = false"
@click="editText(text)"
handle=".drag-handle"

... ```

[Uysim]

@xlanex6 You solution won't work on table.

[MarcelloTheArcane]

It doesn't work for me... Also are you sure the prop should be cased like that? Apparently html ignores it

[David-Desmaisons]

Try:
:empty-insert-threshold="100"

[keeev]

Try:
:empty-insert-threshold="100"

this seems to work for me, but even though the slot is set to footer the item gets added below the footer while dragging. After the drop, it's displaying properly again (above the footer). Maybe this will work if I add a min-height. I just have to figure it out.

[James-Z-Tang]

When a draggable is bound to an empty list, the inner transition-group - which is rendered as a span - will get a size of 6x22 px, no matter how you set the css or empty-insert-threshold.
After many tries I still can not drop into an empty list.

[James-Z-Tang]

I solved this problem by using a placeholder in empty list. More work to be done in onEnd method in order to removed the placeholder item from non-empty list and add it to empty list. And on saving to DB the placeholder item also needs to be removed.

[alecgibson]

I think this is possible on the official demo (NB: The example is titled wrong: they're footers, not headers), but we've found another issue:

It's (only?) possible to drag content _underneath_ a footer, which I wouldn't expect to be possible. Dropping the content then snaps it back _above_ the header, which is pretty jarring.

[markadrake]

For what it's worth - this is because of a span element that provides the actual target for the eventual drop. I used CSS to style the span element giving it a full height to resolve. I have lanes (like a Kanban board) and thus the entire lane could be empty and yet the drag area should be the entire lane, not a 0px tall target. Happy to provide screenshots if it assists.

[hmellin97]

@markadrake I'm working on a project similar to your Kanban board. Could you provide some screenshots on how you solved this issue? Thank you.