有没有办法在 Angular 中使字段可拖动和可编辑？

Posted 2023-05-08

【中文标题】有没有办法在 Angular 中使字段可拖动和可编辑？

【英文标题】：Is there a way to make a field draggable and editable in Angular?

【发布时间】：2019-11-12 14:53:19

【问题描述】：

我一直在 CDK 中试验 Angular 8 的 DragDropModule。虽然我能够使字段或文本可拖动，但似乎没有办法使其可拖动和可编辑。似乎拖动取消了对字段的编辑。

您可以编辑：

<h2 contenteditable="true"> --- Edit Me! :) --- </h2>

你可以拖动：

<h2 cdkDrag> --- Drag Me! :) --- </h2>

但不是两者兼有：

<h2 cdkDrag contenteditable="true"> --- What a drag! :( --- </h2>

【问题讨论】：

请参阅this answer 以获得解决方案。

【参考方案1】：

如果你想保持简单并且只使用cdkDragDrop 提供的东西，你可以使用cdkDragHandle 属性。使用它，拖动只能使用指定的句柄，您将能够在元素内编辑您想要的内容。

我知道它不能完全解决您的问题，但如果您不需要从元素上的任何位置拖动，这是一个选项。

Small example here

【讨论】：

谢谢。这就是所有 javascript 框架都面面相觑的地方。最终，您将遇到一个场景，您必须面对 JavaScript 的邪恶才能自定义功能。