我找到了this stackblitz使用angular cdk将拖放添加到mat-table的示例。但是,所需的行为是该行只能使用带有cdkDragHandle指令的元素进行拖动。在此示例中,您可以通过单击行上的任意位置来拖动元素。如何修改这个行只能使用拖动手柄拖动?
恕我直言,除了黑客/覆盖Angular Material / CDK的源代码之外,没有快速解决这个问题。遗嘱是github:https://github.com/angular/material2/issues/13770的开放特征请求。
问题是数据源/ MatTable上的cdkDrag会自动在所有子元素(生成行为)上创建拖动注释,并且不能(轻松)覆盖。
基于文档cdkDrag/cdkDragDisabled
- cdkDragHandle/cdkDragHandleDisabled
应该有所帮助(它确实可以在没有表的情况下工作)。我已经升级了示例中的所有库以支持它们,但没有效果。
我通过将cdkDrag
应用于dragHandle本身而不是行,并使用cdkDragRootElement
来识别行来实现该UX。它实现了通过句柄拖动的UX,但是仍然存在一个错误,阻止了丢弃后的实际重新排序。