Vue Draggable - Is there a way to set up a placeholder dropzone/location at the bottom of lists?

Question

I'm working with Vue.Draggable (https://github.com/SortableJS/Vue.Draggable) to create a type of kanban board that allows me to drag items from one list to another. The problem I have is that when I drag a list item to the bottom of another list, the item won't get added to the list unless your mouse cursor touches an item from the second list while dragging.

I know that when you have an empty list, you can set the ':empty-insert-threshold' which increases the drop radius to make it easier to drop items into the empty list, but is there a way to do the same, at the bottom of of a list that's not empty? if not, would it be possible to add a placeholder element that allows a user to drop the list item at the bottom of the list with ease?

we've found that many users instinctively drag new items to the bottom of lists, which is why we would like to make this functionality work better.

Answer 1

I found that if you add sufficient padding to the bottom of the component, it does the job, i.e., provides a space to drop stuff at the bottom and gives a visual clue:

<draggable
   :list="inProgressTaskList" 
   group="tasks"
   @change="onDragChange" 
   itemKey="id"
   style="background: yellow; padding-bottom:200px">

The extreme yellowness is just for illustrative purposes!

I'm using the newer version for Vue 3 but I guess it's still work for the Vue 2 version.

:o)

Answer 2

I saw a nice workaround in the issues of the repo that makes the placeholder for empty elements only appear for when the draggable is empty, and also takes into account the transition for groups (I didn't test this case, but without transitions is working just fine for me), copying here the answer in case that changes in the future:

<transition-group type="transition" tag="div">

.list-group:empty,
.list-group > div:empty {
    padding:1rem;
    text-align:center;
}

.list-group:empty:before,
.list-group > div:empty:before {
    content: 'Drop files here';
}