Drag and drop does not work with touch event/ touch screen devices

[Swarupa N]

Hello Team,

I am referring to one of the sample of external drag and drop

https://ej2.syncfusion.com/angular/demos/#/material/schedule/external-drag-drop .

The above sample works fine with the mouse events but when i try to run sample with touch event. Drag does not work.

Failed scenario:

On touch based devices or Simulate application for touch devices - drag and drop appointment from 10.00AM to 13.00PM or any different time.Drag itself does not work.

I do not want to display quick-info box as well as open editor dialog. Simply drag and drop appointment and update with touch event.

Working Scenario: Simulate application for touch screen, drag appointment from waiting list and drop on timeline.

Kindly guide to solve this issue.

Thanks in advance.

[Satheesh Kumar Balasubramanian]

Hi Swarupa, 

  

Thanks for using Syncfusion Products. 

  

We have validated your reported query "Drag and drop does not work with touch event/touch screen devices" and tried to reproduce the reported issue at our end by drag and drop an appointment in touch devices. But, we were unable to reproduce the issue at our end.  We have checked in windows touch desktop, android mobile and in chrome emulator. 

  

Could you please share the below details to reproduce the issue? This will help us to validate the issue and provide prompt solution at earliest. 

• Whether the issue replicates in specific browser or device?
• Share issue replicating video
• Share the error details if you are facing any script errors?
• Share whether you are done any customization in dragStop event?
• Can you please confirm whether you are using emulator (or) real device to test your application?
  

Regards,

Satheesh Kumar B

[Swarupa N]

Hello Satheesh ,

Thanks for your reply,

1. The issue is replicates on both device and Simulator using chrome or edge browser. for browser on desktop I am enforcing the touch event.
2. The console is clear, it does not show any error.
3. I have disabled the showInfobox on single tap/click by setting its value false
   
4. With respect to events, onPopupOpen ,I am disabling editor dialog window on double click/tap with args.cancel = true; ​So the whenever I tap and hold appointment, it should allow me to drag and drop. What I have observed is, its not triggering any of event dragStart, dragStop, onActionBegin. But specifically allows resize of appointments by vertical stretch. So the trouble is with shifting appointments.

Observed same issues with -

https://ej2.syncfusion.com/angular/documentation/schedule/appointments/#drag-and-drop-appointments when executed with disabling editor and info dialog and tried to drag drop.

With mouse event everything works perfectly.

Thanks,

Swarupa N

[Satheesh Kumar Balasubramanian]

Hi Swarupa, 

  

Thanks for your update. 

  

We have validated your reported query and prepared sample based on shared details to reproduce the reported issue. But we were unable to reproduce the issue at our end. 

  

Please find the sample which prepared for your issue - https://stackblitz.com/edit/angular-schedule-drag-drop?file=app.component.ts 

  

Also please find the video for your reference - https://www.syncfusion.com/downloads/support/forum/166752/ze/DragAndDropIssueVideo-1442605783 

  

Could you please share the below details to reproduce the issue? This will help to validate the issue and provide prompt solution as soon as possible. 

• Share the above sample with modifying code to replicate the issue
• Share issue replicating sample if possible
• Share all schedule related code snippets along with the Syncfusion package version
• Share issue replicating video
  

Regards,

Satheesh Kumar B

[Swarupa N]

Hello Satheesh,

I have tried to execute the sample provided by you - https://stackblitz.com/edit/angular-schedule-drag-drop?file=app.component.ts But still faced same issue. I have followed the tap and hold gesture for touch event as well.

Please find the attached video while running he sample and also the chrome developer tool settings to enable touch event.

Same replicates over touch device as well.

Attachment: Dragdropsyncfusion_cc7ea345.zip

[Swarupa N]

Hello Satheesh,

As you see in the attached video, vertical up-down stretch works properly, only the thing not able to change time slot and dates as shifting is blocked.

Note : On mobile browser it works fine. But if you open browser as 'Desktop Site' it breaks

Thanks and regards,

Swarupa N

Attachment: Syncfusion_drag_and_drop_1_7affdfbe.zip

[Satheesh Kumar Balasubramanian]

Hi Swarupa, 

  

Thanks for your update. 

  

We have validated your reported query based on the shared video and suspect that you may not tap hold the appointment properly while dragging. So, please try to tap and hold the appointment properly to perform drag and drop actions. Can you please confirm whether you are performing tap-hold using mouse (or) tap-hold with hand for perform drag and drop? 

Regards,

Satheesh Kumar B

[Swarupa N]

Thank you for your reply Satheesh.

On Chrome browser : The tap and hold is performed with mouse, setting touch event.

On actual touch screen device[mobile/tablet] : The tap and hold is performed with finger tip.

As I mentioned earlier , for sample -  https://stackblitz.com/edit/angular-schedule-drag-drop?file=app.component.ts  

on mobile/tablets drag and drop works when opened in Non-Desktop Mode. But when we check 'Desktop Site' from browser setting. drag and drop stops working.

[Satheesh Kumar Balasubramanian]

Hi Swarupa, 

  

Thanks for your update. 

  

We have validated your reported query "Drag and drop does not work with touch event/ touch screen devices" and confirmed this as defect at our end. So, we have logged the bug report which can be tracked from the following link. 

  

https://www.syncfusion.com/feedback/26689/drag-and-drop-does-not-work-with-touch-event-touch-screen-devices 

  

The issue fix for this defect will be included in our weekly patch release which is expected to be rolled out by end of July 2021. We would appreciate your valuable patience until then. 

  

Regards, 

Satheesh Kumar B 

[Swarupa N]

Hi Satheesh ,

Thanks for your update and support to resolve this issue. 

Regards,

Swarupa N

[Nevitha Ravi]

Hi Swarupa, 

You are most welcome..! we appreciate your patience until the fix has been included. 

Regards, 

Nevitha 

[Nevitha Ravi]

Hi Swarupa, 

Thanks for being patience. 

We are glad to announce that our weekly patch release v19.2.47 has been rolled out successfully. The reported bug with drag and drop in touch devices and mobile devices when enabled desktop site has been fixed in this release. As a result, we recommend you to upgrade to the latest version of our Syncfusion package in order to avail this fix. 

https://ej2.syncfusion.com/angular/documentation/release-notes/19.2.47/?type=all#schedule 

Kindly check the reported defect in the latest version and get back to us if you need any further assistance.  

 

Regards, 

Nevitha