Print Page - [SOLVED] Drag/drop extension on mobile

Title: [SOLVED] Drag/drop extension on mobile
Post by: Pierre on October 24, 2018, 07:17:00 AM

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.

Title: Re: Drag/drop extension on mobile
Post by: stworthy on October 24, 2018, 08:09:39 PM

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

Code:

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

Title: Re: Drag/drop extension on mobile
Post by: Pierre on October 25, 2018, 12:25:35 AM

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?

Title: Re: Drag/drop extension on mobile
Post by: Pierre on October 25, 2018, 05:03:19 AM

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?

Title: Re: Drag/drop extension on mobile
Post by: stworthy on October 25, 2018, 05:02:15 PM

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

Title: Re: Drag/drop extension on mobile
Post by: Pierre on October 26, 2018, 03:21:17 AM

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.

Title: Re: Drag/drop extension on mobile
Post by: stworthy on October 26, 2018, 06:52:53 PM

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

Title: Re: Drag/drop extension on mobile
Post by: Pierre on October 30, 2018, 06:00:49 AM

OK thank you.

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: Pierre on October 24, 2018, 07:17:00 AM