如何使用cdkDragHandle进行mat-table行拖放工作,以便该行只能使用句柄拖动?

问题描述 投票:2回答:2

我找到了this stackblitz使用angular cdk将拖放添加到mat-table的示例。但是,所需的行为是该行只能使用带有cdkDragHandle指令的元素进行拖动。在此示例中,您可以通过单击行上的任意位置来拖动元素。如何修改这个行只能使用拖动手柄拖动?

https://stackblitz.com/edit/angular-igmugp

angular typescript angular-material angular-cdk
2个回答
1
投票

恕我直言,除了黑客/覆盖Angular Material / CDK的源代码之外,没有快速解决这个问题。遗嘱是github:https://github.com/angular/material2/issues/13770的开放特征请求。

问题是数据源/ MatTable上的cdkDrag会自动在所有子元素(生成行为)上创建拖动注释,并且不能(轻松)覆盖。

基于文档cdkDrag/cdkDragDisabled - cdkDragHandle/cdkDragHandleDisabled应该有所帮助(它确实可以在没有表的情况下工作)。我已经升级了示例中的所有库以支持它们,但没有效果。


1
投票

我通过将cdkDrag应用于dragHandle本身而不是行,并使用cdkDragRootElement来识别行来实现该UX。它实现了通过句柄拖动的UX,但是仍然存在一个错误,阻止了丢弃后的实际重新排序。

See Stackblitz here.

Documentation of cdkDragRootElement is here.

Here is link to Github issue about it.

© www.soinside.com 2019 - 2024. All rights reserved.