Vue Draggable - 有没有办法在列表底部设置占位符放置区/位置？

Question

我正在使用 Vue.Draggable （https://github.com/SortableJS/Vue.Draggable）创建一种看板，它允许我将项目从一个列表拖动到另一个列表。我遇到的问题是，当我将一个列表项拖动到另一个列表的底部时，除非鼠标光标在拖动时触摸第二个列表中的项目，否则该项目不会添加到列表中。

我知道当你有一个空列表时，你可以设置 ':empty-insert-threshold' 来增加放置半径，以便更容易地将项目放入空列表中，但是有没有办法做到同样的事情，在列表的底部不为空？如果没有，是否可以添加一个占位符元素，允许用户轻松地将列表项拖放到列表底部？

我们发现许多用户本能地将新项目拖到列表底部，这就是为什么我们希望使此功能更好地发挥作用。

Answer 1

我发现，如果您在组件的底部添加足够的填充，它就会完成工作，即提供一个空间来在底部放置东西并给出视觉线索：

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

极度黄色仅用于说明目的！

我正在使用 Vue 3 的较新版本，但我想它仍然适用于 Vue 2 版本。

:o)