Is there a way to make a field draggable and editable in Angular?

Question

I've been experimenting with Angular 8's DragDropModule in the CDK. While I am able to make a field or text draggable, there doesn't seem to be a way to make it draggable and editable. It appears the dragging cancels out the editing of a field.

You can edit:

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

You can drag:

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

But not both:

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

Answer 1

If you want to keep things simple and only use what cdkDragDrop provides, you could use the cdkDragHandle property. Using this the dragging will only work using the specified handle and you will be able to edit the content you want inside the element.

I know it doesn't fully solve your issue, but if you don't need to drag from anywhere on the element, it's an option.

Small example here