区分cdkDrag并点击angular

Question

我有一个我使用过的可拖动元素 cdkDrag，它对我来说工作正常。现在，我需要在单击元素时切换一个标志。但是当我拖动元素并放下点击事件触发器时。你能建议如何一起使用 cdkDrag 和 click 吗？共享相同的代码片段。

        <div class="draggable-content" cdkDragBoundary=".drop-area" cdkDrag>
          <div class="min-workspace-view" *ngIf="showMinWorkspace === true">
            <mat-icon svgIcon="workspace" class="workspace-icon"
              (click)="$event.stopPropagation(); showMinWorkspace = !showMinWorkspace">
            </mat-icon>
          </div>
        </div>

预期是：当拖动元素然后单击时不应触发。当仅单击元素时，不应触发拖动事件。

Answer 1

我找到了解决方法。

您需要一个布尔值属性。我们称它为 dragging.

在您的 cdkDrag 元素上，添加一个 cdkDragStarted 回调，将此属性设置为 true。然后在您的 click 回调中，如果 this.dragging 为真，则将其设置为假和 return。嘿 Presto！

在这里工作 stackblitz https://stackblitz.com/edit/angular-drag-drop-and-clickable-element

区分cdkDrag并点击angular

Differentiate cdkDrag and click in angular

angular-material

angular

angular-cdk