[SOLVED] Drag/drop extension on mobile

[Pierre]

Hello
I'm using Drag/Drop extension https://www.jeasyui.com/extension/datagrid_dnd.php
and it works fine
Problem is on mobile devices, when datagrid is wider then screen then user need to scroll left<->right and in same time drag/drop become active. If there is no solution, how to disable drag/drop when using mobile device, please?
Thank you.

[stworthy]

Return false in 'onBeforeDrag' event to disable the dnd action.

Code:

$('#dg').datagrid({
  onBeforeDrag: function(){
    return false;
  }
})

[Pierre]

Thank you but I need dragDrop on desktop and laptop and only to disable it on mobile devices.
Is it good option to check screen width and if it is smaller then 768px, then disable dragDrop?

[Pierre]

Hello
when I add

Code:

  var width = $(window).width();
  $('#dg').datagrid({
    onBeforeDrag: function(){
      if (width < 768){
        return false;
      }
    }
  });

Then Error is displayed (in console log):

Code:

jquery.easyui.min.js:364 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080

How to solve this, please?

[stworthy]

Please look at this example http://code.reloado.com/okuzaj4/edit#html

[Pierre]

Yes it works well but only when using desktop and when you resize screen.
I created new example here:
http://code.reloado.com/okuzaj4/4/edit#preview
when you use mobile device (please check attached image) and when you try to drag, in same time is screen moved and datagrid row.
Best option will be when drag/drop works on mobile devices but if not possible, I need to disable drag/drop on mobile devices.
Thank you.

[stworthy]

In mobile device, scrolling rows and drag a row use the same 'ontouchstart' event. This makes it confused to understand the operation with 'ontouchstart'. To avoid this issue, detect the mobile device and disable the dnd functionality.
If you doesn't detect the 'width' of window, please try this instead.

Code:

$('#dg').datagrid({
  data: data,
  singleSelect: true,
  fitColumns: true,
  onLoadSuccess: function(){
    var isMobile = 'ontouchstart' in document.documentElement;
    if (!isMobile){
      $(this).datagrid('enableDnd')
    }
  }
})

You can also set the 'dragDelay' to a bigger value to delay the dnd when touching on a row. Make sure to download the newer file 'datagrid-dnd.js' from https://www.jeasyui.com/extension/datagrid_dnd.php

[Pierre]

OK thank you.