Add enable/disable funcionality to ngxDraggable directive

[DavidMarquezF]

I'm submitting a ... (check one with "x")

[ ] bug report => Search github for a similar issue or PR before submitting
[ x] feature request
[ ] support request => Sorry, we will not be able to answer every support request.  Please consider other venues for support requests

Current behavior There is no way to disable the directive. You could achieve this behaviour by using *ngIf, but it would be nice to have this functionality added.

Expected behavior Input property in ngxDraggable to enable or disable drag. This would be useful in case we only want the user to be able to drag and drop when a condition is true (for example, if we want to have an edit mode, that only activates when a user presses a button).

What is the motivation / use case for changing the behavior? To make the code more readable and easy to create, this way we won't have to repeat the code without ngxDraggable using ngIf, which is pretty unconvinient and not elegant.

• Browser: all

[harellevy]

any workarounds?

[leppaelae]

any workarounds?

i did this: if (sortingDisabled) { this.orderThings(); return; }

[DavidMarquezF]

A possible workaround (in Angular) could be:

<div class="ngx-dnd-container" ngxDroppable>
 <div *ngIf="!isInEditMode; else EditMode">Not draggable</div>
 <ng-template #EditMode>
    <div ngxDraggable>Draggable</div>
 </ng-template>
</div>

[IgorKurkov]

A possible workaround (in Angular) could be:

<div class="ngx-dnd-container" ngxDroppable>
 <div *ngIf="!isInEditMode; else EditMode">Not draggable</div>
 <ng-template #EditMode>
    <div ngxDraggable>Draggable</div>
 </ng-template>
</div>

This is not so usable solution, better will be used [moves]="true" or false for ngxDraggable items. I have a lot of nested elements inside draggable div so need some argument values for ng-template, and we can't drop any parameters to #template in else conditional expression, like this *ngIf="!isInEditMode; else EditMode" unfortunately. === Link to spec ===

[DavidMarquezF]

Now, with CDK Drag & Drop, you can have this functionality. Moreover it's more flexible and easy to use in my opinion.

The enable and disable functionality in CDK Drag & Drop: https://material.angular.io/cdk/drag-drop/overview#disable-dragging

[IgorKurkov]

But in ngx-dnd we can make nested lists, and this is a kill feature ;) angular cdk drag&drop can't do this as I already investigated

[leppaelae]

Aint this workin: [ngxDraggable]="true/false"

On Mon, 4 Feb 2019, 14.09 Igor Kurkov <[email protected] wrote:

But in ngx-dnd we can make nested lists, and this is a kill feature ;) angular cdk drag&drop can't do this as I already investigated

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/swimlane/ngx-dnd/issues/125#issuecomment-460226460, or mute the thread https://github.com/notifications/unsubscribe-auth/AS_imZc1df9Y_MW9wr6OSZmzujwH-gtEks5vKCLlgaJpZM4W0SXq .

[IgorKurkov]

Try [moves]="true" near the ngxDraggable element

[DavidMarquezF]

Try [moves]="true" near ngxDraggable element

Wow, I didn't see the Input moves when I investigated.

https://github.com/swimlane/ngx-dnd/blob/6f5df2d82ac4c8453128407a294f8eb10b7b2f28/projects/swimlane/ngx-dnd/src/lib/directives/ngx-draggable.directive.ts#L24

Guess I could have looked for it better (or is it a recent addition?).

Maybe this should be included in the example, because i can't seem to find it.

[IgorKurkov]

Maybe this should be included in the example because I can't seem to find it.

it is in spec for directives HERE and disable moves or enable them without any errors or conditional directives - which BTW not work properly in Angular unfortunately, as already described here https://github.com/swimlane/ngx-dnd/issues/125#issuecomment-460227565

[rajarajankamban]

There is a work around by using ngxDragHandle directive.

[ngxDragHandle] adds properties and events to drag handle elements

By doing this we can limit the drag-able area or use opacity:0 to disable the drag

<div ngxDragHandle style="opacity:0"></div>

[Eve-Sama]

It works for me. BTW, the docs really suck :(

<div ngxDraggable [moves]="false">drag item</div>

And the design of ngx-dnd-container is useless at all. I believe no company would like to use this UI style. But still thanks for ngx-dnd that help us to deal nested drag&drop situation.

[yash5862]

Here, add more button is set to ngxDraggable [moves]="false" but still other elements can change it's position. Add more button should be at last and stick to it's position.

And, can we achieve rearrangement on array instead of dom? to make the main image rearrangable?