Question

我在垫纸上有问题，可以拖动并包含一些按钮。不幸的是，在我的PC按钮（单击）上根本不起作用，在我的同事上，它有时可以工作。我们认为，这可能是因为点击被视为拖动元素。无论如何，有没有设置最小移动（拖动）长度，这导致开始将对象视为已移动？

它已在两台机器上进行了测试-相同的代码，不同的行为-从未执行过一个按钮（单击），有时是第二个。

我现在在计算机上发现的东西-在调试（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，而不是之前。或任何其他可以解决该问题的解决方案。

Answer 1

我在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;
}

mwlDraggable（拖放）-最小移动长度

1 个答案: