如何在表行内创建一个可以代表整行的拖放包装器

发布于 2024-12-11 12:34:54 字数 229 浏览 1 评论 0原文

当我在 Vaadin 中使用树表时,单击左右空白区域时,它可以正常拖放整行。但这对用户不友好,我想在行内创建一个可拖动的布局,比方说每行的第一个组件,当单击它时,整行都会被选中,并且可以拖放以重新排序。

问题是我可以使用包装器创建一个垂直布局,但是拖动模式仅适用于其组件或包装器本身,并且在执行拖动操作时,它实际上并没有显示整行正在移动,这可能会混淆客户。我该怎么做才能使它看起来像我在拖动整行,类似于拖动每行的空白区域?谢谢。

When I use treetable in Vaadin, it is working fine drag and drop the whole row when click the left and right blank ereas. but that is not user friendly, I wanna create a draggable layout inside the row, let's say the 1st component of the each row, that when clicking it, the whole row is selected and can be draged and dropped to reorder.

The thing is I can create a vertical layout with wrapper doing that, but drag mode is only for its component or the wrapper itself, and when doing the drag action, it doesn't actually showing the whole row is moving, which may confuse the clients. What can I do to make it looking like I am dragging the whole row, similar with the one you drag the blank area of each row? Thanks.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

笑咖 2024-12-18 12:34:54

恐怕目前还没有办法添加一个包装器来扩展整行而不是仅仅一个单元格。为此,您需要扩展 Table (VScrollTable) 的客户端实现,我不推荐这样做,因为它非常复杂。

我确实认为您所描述的内容应该可以在 Vaadin 核心中实现(不使用拖放包装器),所以您可以在 dev.vaadin.com?并且请附上一个显示问题的小应用程序,以便我们更容易地看到问题并解决它。

不管怎样,为了让你今天能够正常工作,我建议你稍微改变一下你的 UI 设计,例如借用 iOS 的拖动手柄。我的意思是,您可以在第一个单元格(或每行的行标题单元格)中添加一个建议“可拖动”作为背景图像的图标,鼓励用户抓住该行,其中 “空”并且拖动有效。这样,如果拖动仅在行的某些部分可靠地起作用,则用户可能不会太困惑。

I'm afraid there currently is no way for adding a wrapper that would extend the entire row instead of just one cell. To do this you'd need to extend the client-side implementation of Table (VScrollTable) and this is not something I would recommend as it is quite complex.

I do think that what you describe should be possible in core Vaadin (without using drag & drop wrappers), so could you please file a ticket at dev.vaadin.com? And please attach a small application showing the problem to make it easier for us to see the problem and fix it.

Anyways, in order for you to get it working today I'd suggest that you change your UI design a bit and for example borrow drag handles from iOS. By this I mean that you could add an icon that suggests "draggable" as a background-image in the first cell (or in the row header cell of each row) that encourages the user to grab the row there, where it is "empty" and dragging works. This way the user might not be too confused if dragging only works reliably in some parts of the rows.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文