Vue可拖动-有没有办法在列表底部设置一个占位符放置区/位置?

wrrgggsh  于 2022-11-30  发布在  Vue.js
关注(0)|答案(1)|浏览(181)

我正在使用Vue.Draggable(https://github.com/SortableJS/Vue.Draggable)创建一种看板,它允许我将项目从一个列表拖到另一个列表。我遇到的问题是,当我将一个列表项目拖到另一个列表的底部时,除非鼠标光标在拖动时接触到第二个列表中的项目,否则该项目不会添加到列表中。
我知道当你有一个空列表时,你可以设置':empty-insert-threshold'来增加拖放半径,使它更容易地将项目拖到空列表中,但是有没有一种方法可以在一个非空列表的底部做同样的事情?如果没有,有没有可能添加一个占位符元素,允许用户轻松地将列表项目拖到列表的底部?
我们发现许多用户会本能地将新项目拖到列表的底部,这就是为什么我们希望使此功能工作得更好。

mutmk8jj

mutmk8jj1#

我发现,如果在组件底部添加足够的填充,它就可以完成任务,即提供一个空间来放置底部的内容,并提供一个视觉线索:

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

极端的黄色只是为了说明的目的!
我正在使用较新的版本为Vue 3,但我猜它仍然为Vue 2版本的工作。
:o)

相关问题