Toggling Angular's cdkDrag drag n drop by code

Question

I am using angular 7's Drag n Drop and I have placed it in a div:

<div class="myDiv" cdkDrag (dblclick)="toggleDraggable($event)">Div Content Here</div>

So what I need to do is that when I double click on this div above the cdkDrag toggles on and off.

Either disappearing or not. Just need to toggle the draggable.

How can I do this?

You could consider using conditional dynamic attributes of `[attr.cdkDrag]` based on some boolean expression. With `toggleDraggable()` inverting the value used by that expression as needed. https://stackoverflow.com/questions/36745734/how-to-add-conditional-attribute-in-angular-2/36745752 — Alexander Staroselsky, Feb 25 '19 at 15:11

score 26 · Accepted Answer · answered Feb 25 '19 at 15:12

26

There is cdkDragDisabled input.

<div class="example-box" cdkDrag [cdkDragDisabled]="isDisabled">
  Drag me around
</div>

And you can just change isDisabled variable.

Here is an example.

answered Feb 25 '19 at 15:12

Ivan

1 Answers1