有没有一种方法可以使字段在Angular中可拖动和可编辑？

Question

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

您可以编辑：

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

您可以拖动：

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

但不能两者兼有：

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

Answer 1

如果您想保持简单，仅使用cdkDragDrop提供的内容，则可以使用cdkDragHandle属性。使用此操作，拖动只能使用指定的手柄，并且您可以在元素内编辑所需的内容。

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

Small example here