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

问题描述

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

通过cdkDropListDropped事件，我可以防止拖放，但也不应将其拖动.如何告诉cdkDropList或每个cdkDrag元素禁用拖动?

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>

推荐答案

您可以将cdkDragHandle与类"的某些属性(如打开或关闭)一起使用，并将属性绑定到类".

You can use cdkDragHandle with Property binding with "class" some property like on or off something like 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
}

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