I have implemented a calendar with a data view object alongside it. I have successfully set it up to allow dragging in from the data viewer onto the calendar and from the calendar into the data viewer object. This works great on the desktop, but not at all on touch devices. Is there any way to enable that feature for touch devices as well?
Hello @kdoronzio ,
It’s hard to give any suggestions, as I don’t have any information about the solution you implemented, does it’s similar as following demo(which uses custom draggable element and don’t support mobile drag):
https://snippet.dhtmlx.com/5/2c5bef3a5
if no, could you please provide more details, or reproduce your case in the snippet above(open the snippet => reproduce the issue on “HTML/CODE” tabs => click the “Share” button)?
but technically there are approaches of making elements draggable exactly on mobile devices, as described by the following link:
https://medium.com/@deepakkadarivel/drag-and-drop-dnd-for-mobile-browsers-fc9bcd1ad3c5
I’ve tested it on the IOS, and it worked pretty correctly. So, probably you can check this solution for your case.
Hello @Siarhei,
I have the same issue as shown in demo link (which uses custom draggable element and don’t support mobile drag)
https://snippet.dhtmlx.com/5/2c5bef3a5?_ga=2.142102843.807899280.1640006311-2085167434.1638362584
Can you suggest any solution for this problem.
Thanks in advance
Hello @Ishitha_Jain ,
As I mentioned in the answer above, this snippet works only with a mouse drag event
(which uses custom draggable element and don’t support mobile drag):
https://snippet.dhtmlx.com/5/2c5bef3a5 6
In the case of mobile drag you can use as a reference solution from the following article:
https://medium.com/@deepakkadarivel/drag-and-drop-dnd-for-mobile-browsers-fc9bcd1ad3c5
It can be used to make the mobile drag for 3-rd party elements, with one change - as the mobile touchend event doesn’t contain the pageX and pageY properties, that are required for the getActionData event(that calculates the date and section in the scheduler, in which the event should be created(by a drop of 3-rd party element), so you should add them to the event object as follows:
box.addEventListener('touchend', function(event) {
event.pageX = touchLocation.pageX;
event.pageY = touchLocation.pageY;
var action_data = scheduler.getActionData(event);
After that, the solution should work pretty well:
https://recordit.co/8L5GxVNNu5
Here is the updated demo:
http://snippet.dhtmlx.com/5/4c0bf727a