Angular события перетаскивания не работают на мобильных устройствах - PullRequest
Новая
       4

Angular события перетаскивания не работают на мобильных устройствах

0 голосов
/ 21 февраля 2020

Я имел в виду ниже сообщения.

Перетаскивание Javascript не работает на мобильных устройствах

html5 перетаскивание FOR MOBILE

HTML Перетаскивание на мобильных устройствах

Обычный angular 6 перетаскивание не работает на мобильных устройствах. Я обнаружил, что это не будет работать на телефонах.

Согласно этому этому комментарию большинство мобильных устройств не слушают события перетаскивания, связанные с DOM. Событие прикосновения и события, которые go вместе с ним могут работать.

Я использовал

touchstart вместо dragstart

touchend вместо drop

touchmove вместо dragover.

Я применил ngIf для переключения на мобильные устройства и веб-интерфейс. Не похоже на работу. Любые предложения по улучшению или ответы, чтобы применить лучшее решение? 

<div class="row-fluid food_item_list" *ngIf="(deviceType == deviceTypes.Web )" (drop)="drop($event, 1)" (dragover)="allowDrop($event)" [ngClass]="{'custom-border':unSelectedfoodItemsList?.length > 0}">
  <table class="table draggable-table">
    <tbody *ngIf="unSelectedfoodItemsList?.length > 0 ;else noDataTmplt1">
      <tr *ngFor="let item of unSelectedfoodItemsList" draggable="true" (dragstart)="drag($event, 1)" attr.itemId={{item.items_id}}>
        <td>{{item.name}}</td>
      </tr>
    </tbody>
  </table>
</div>

<div class="row-fluid  food_item_list" *ngIf="(deviceType == deviceTypes.Tablet || deviceType == deviceTypes.Mobile )" (touchend)="drop($event, 1)" (touchmove)="allowDrop($event)" [ngClass]="{'custom-border':unSelectedfoodItemsList?.length > 0}">
  <table class="table draggable-table">
    <tbody *ngIf="unSelectedfoodItemsList?.length > 0 ;else noDataTmplt1">
      <tr *ngFor="let item of unSelectedfoodItemsList" draggable="true" (touchstart)="drag($event, 1)" attr.itemId={{item.items_id}}>
        <td>{{item.name}}</td>
      </tr>
    </tbody>
  </table>
</div>
...