BTMorton / angular2-grid

A drag/drop/resize grid-based plugin directive for angular2
https://bmorton.co.uk/angular/
MIT License
354 stars 159 forks source link

Unable to fire click event in touch devices #274

Open bruiztorres opened 6 years ago

bruiztorres commented 6 years ago

I'm facing an issue when a widget in the grid implements the click event in touch devices. For some reason the click callback is not fired because the event is intercepted when resizable/draggable options are enabled:

    this.gridConfig = {
        resizable: true,
        draggable: true,
        max_rows: 4,
        margins: [0],
        auto_resize: false,
        cascade: 'left',
        col_width: size,
        min_width: size,
        row_height: size,
        min_height: size
    };
  <div class="dashboard grid" [ngGrid]="gridConfig">
    <div class="dashboard-item" *ngFor="let widget of dashboard.Widgets; let i = index; trackBy:identify" [ngGridItem]="{
          'payload': widget.Id,
          'sizex': widget.Size.Width,
          'sizey': widget.Size.Height,
          'col': widget.Position.X,
          'row': widget.Position.Y,
          'resizable': true
         }">
      <div (click)="doSomething()"></div>
    </div>
  </div>

Did you know any workaround to deal with this issue?

Thanks in advance.

crivadavi commented 6 years ago

on the griditem config you could set the dragHandle property to limit the click event prevented only in a restricted area, for example:

<div class="dashboard-item" *ngFor="let widget of dashboard.Widgets; let i = index; trackBy:identify"
    [ngGridItem]="{
          'payload': widget.Id,
          'sizex': widget.Size.Width,
          'sizey': widget.Size.Height,
          'col': widget.Position.X,
          'row': widget.Position.Y,
          'resizable': true,
          'dragHandle': '.title'
         }">
      <div style="height: 5%;" class="title"></div>
      <div (click)="doSomething()"></div>
</div>
rmiller-sgntr commented 6 years ago

I think the whole idea is to not use a drag handle, and let the grid use the entire item, as described in the README. It works perfectly fine on non-mobile. I too would like to have this option. Can someone suggest a solution that does not involve using a restricted handle?