web-dev-qa-db-fra.com

Cdk Drag And Drop comment empêcher le glissement

J'essaie d'utiliser le module Angular Material CDK DragDrop de https://material.angular.io/cdk/drag-drop/overview

Avec l'événement cdkDropListDropped, je peux empêcher la suppression, mais il ne doit pas non plus être déplacé. Comment dire à un cdkDropList ou à chaque élément cdkDrag de désactiver le glissement?

<div class="list-group" id="orderlist" cdkDropList (cdkDropListDropped)="drop($event)">
                        <a class="list-group-item" 
                            [class.linked]="ord.linkedToPrevious" 
                            [class.selected]="ord.selected"
                            *ngFor="let ord of items" (click)="selectOrder(ord, $event)" cdkDrag>
                            <button class="btn btn-default btn-link linkeditem" [class.linked]="ord.linkedToPrevious" 
                                (click)="linkTechnology(ord, $event)" 
                                    [attr.disabled]="editing ? null : true">
                                <span class="glyphicon glyphicon-link"></span>
                            </button>
                            <h4>{{ord.technology.name}}</h4>
                        </a>
                    </div>
angularangular-materialangular-cdk
6
Perrier

Vous pouvez utiliser cdkDragHandle avec la liaison de propriété avec "class" une propriété comme on ou off quelque chose comme toggle.

<div class="example-handle" [class.your-css-class]="!editing" cdkDragHandle>
<svg width="24px" fill="currentColor" viewBox="0 0 24 24">
  <path d="M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z"></path>
  <path d="M0 0h24v24H0z" fill="none"></path>
</svg>

.your-css-class{
display: none
}
1
Narendra Singh Rathore

Désactiver le glissement Si vous souhaitez désactiver le glissement pour un élément de glissement particulier, vous pouvez le faire en définissant l'entrée cdkDragDisabled sur un élément cdkDrag. En outre, vous pouvez désactiver une liste entière à l'aide de l'entrée cdkDropListDisabled sur un cdkDropList ou une poignée particulière via cdkDragHandleDisabled sur cdkDragHandle.

<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
  <div
    class="example-box"
    *ngFor="let item of items"
    cdkDrag
    [cdkDragDisabled]="item.disabled">{{item.value}}</div>
</div>
12
Me Sa

Si vous souhaitez désactiver le glissement pour un élément de glissement particulier, vous pouvez le faire en définissant l'entrée cdkDragDisabled sur un élément cdkDrag.

<div cdkDropList class="list" (cdkDropListDropped)="drop($event)">
<div *ngFor="let item of dragedItems" cdkDrag 
[cdkDragDisabled]="item.disabled"> {{item.value}} </div>
</div>

Référence: https://github.com/angular/material2/blob/master/src/material-examples/cdk-drag-drop-disabled/cdk-drag-drop-disabled-example.html

https://github.com/angular/material2/pull/13722/commits/bd56a49dda5b5d2f0f0f2feac829afbe3752f5d5

2
Mohd. Shariq