☰

CdkDragAndDrop ドラッグを防ぐ方法 質問する

tag-icon • tag-icon angular angular-material angular-cdk
CdkDragAndDrop ドラッグを防ぐ方法 質問する

私はAngular Material CDK DragDropモジュールを使用しようとしていますhttps://material.angular.io/cdk/ドラッグドロップ/概要

cdkDropListDropped イベントを使用すると、ドロップを防止できますが、ドラッグすることもできません。cdkDropList または各 cdkDrag 要素にドラッグを無効にするように指示するにはどうすればよいですか?

<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>

ベストアンサー1

ドラッグを無効にする 特定のドラッグ項目のドラッグを無効にする場合は、cdkDrag 項目に cdkDragDisabled 入力を設定します。さらに、cdkDropList の cdkDropListDisabled 入力を使用してリスト全体を無効にするか、cdkDragHandle の cdkDragHandleDisabled を介して特定のハンドルを無効にすることもできます。

<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>

おすすめ記事