我有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,而不是之前。或任何其他适用于该问题的解决方案。
我在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;
}