1

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>
ATL_DEV
  • 9,256
  • 11
  • 60
  • 102
  • See [this answer](https://stackoverflow.com/a/61128879/5214911) for a solution. – tom Apr 09 '20 at 21:07

1 Answers1

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

Jojofoulk
  • 2,127
  • 1
  • 7
  • 25
  • Thanks. This is where all JavaScript Frameworks fall flat on their faces. Eventually, you'll encounter a scenario where you have to face the evil of JavaScript in order to customize a feature. – ATL_DEV Jul 02 '19 at 14:23