mwlDraggable(拖放) - 最小移动长度

问题描述 投票:0回答:1

我有mat-card的问题,这是可拖动的,还包含一些按钮。不幸的是,在我的电脑按钮(点击)根本不工作,在我的同事,它有时工作。我们认为可以将click视为拖动元素。无论如何设置最小移动长度(拖动),这会导致开始处理对象移动?

它在2台机器上进行了测试 - 相同的代码,不同的行为 - 按钮上的一个(单击)从不执行,有时是第二个。

我现在在计算机上找到的东西 - 当我正在调试它时(Chrome) - 当我将鼠标光标移动到卡片上时,出现这种情况的一个例子 - 我从调试器上看到整个应用程序的蓝色“阴影”,但按钮是可点击的 - 它按照我的预期工作,否则 - 不是。

<mat-card mwlDraggable *ngFor="let item of items; let i = index" [dragActiveClass]="'field-dragged'"
[dropData]="item" (dragEnd)="itemFieldDragEnd($event, item)">
<mat-card-content>
   <div class="pull-left m-t-5">
      {{item.name}}
      <div class="field-meta truncate">
         {{item.desc}}
      </div>
   </div>
   <div class="pull-right">
      <button mat-icon-button (click)="onItemFieldClick($event, item)" matTooltip="somehint">
         <mat-icon class="md-24">arrow_forward_ios</mat-icon>
      </button>
   </div>
</mat-card-content>
</mat-card>

我想获得强制mwlDraggable成为可拖动的方法,只有当它真的被让我们说10px,而不是之前。或任何其他适用于该问题的解决方案。

html angular
1个回答
0
投票

我在github上找到了解决方案:https://github.com/mattlewis92/angular-draggable-droppable/issues/53

以上使用的示例性完全实现的解

<mat-card mwlDraggable *ngFor="let item of items; let i = index" [dragActiveClass]="'field-dragged'"
[dropData]="item" (dragEnd)="itemFieldDragEnd($event, item)"
[validateDrag]="dragThresholdValidator">
<mat-card-content>
   <div class="pull-left m-t-5">
      {{item.name}}
      <div class="field-meta truncate">
         {{item.desc}}
      </div>
   </div>
   <div class="pull-right">
      <button mat-icon-button (click)="onItemFieldClick($event, item)" matTooltip="somehint">
         <mat-icon class="md-24">arrow_forward_ios</mat-icon>
      </button>
   </div>
</mat-card-content>
</mat-card>

public dragThresholdValidator({ x, y }: any): boolean {
    const min_drag_threshold = 5;
    return Math.abs(x) > min_drag_threshold || Math.abs(y) > min_drag_threshold;
}

© www.soinside.com 2019 - 2024. All rights reserved.