CdkDragAndDrop 如何防止拖动 [英] CdkDragAndDrop how to prevent dragging

问题描述

我正在尝试使用 https://material 中的 Angular Material CDK DragDrop 模块.angular.io/cdk/drag-drop/overview

使用 cdkDropListDropped 事件，我可以防止丢弃，但也不应拖动它.如何告诉 cdkDropList 或每个 cdkDrag 元素禁用拖动?

<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><h4>{{ord.technology.name}}</h4></a>

解决方案

禁用拖动如果要禁用特定拖动项的拖动，可以通过在 cdkDrag 项上设置 cdkDragDisabled 输入来实现.此外，您可以使用 cdkDropList 上的 cdkDropListDisabled 输入或通过 cdkDragHandle 上的 cdkDragHandleDisabled 禁用特定句柄来禁用整个列表.

{{item.value}}

I'm trying to use the Angular Material CDK DragDrop module from https://material.angular.io/cdk/drag-drop/overview

With the cdkDropListDropped event I can prevent dropping but it shouldn't be dragged either. How can I tell a cdkDropList or each cdkDrag elements to disable dragging?

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

解决方案

Disable dragging If you want to disable dragging for a particular drag item, you can do so by setting the cdkDragDisabled input on a cdkDrag item. Furthermore, you can disable an entire list using the cdkDropListDisabled input on a cdkDropList or a particular handle via cdkDragHandleDisabled on 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>

这篇关于CdkDragAndDrop 如何防止拖动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！