Gridstack on MS Surface - drag&drop and resize not working

[bimarc]

Subject of the issue

Drag and resize events on MS Surface not working.

Your environment

• gridstack.js last version
• Chrome last version

Steps to reproduce

Go to gridstackjs.com and try to work with gridstack demos

Actual behaviour

In tablet mode (touch) - Drag and resize on gridstack item not working using MS Surface

[adumesny]

from the doc it says:

(Optional) jquery-ui-touch-punch for touch-based devices support

that's likely the reason. I don't have a tablet to test this though...

[bimarc]

The problem is MS Surface, when you touch the screen the events launched aren't Touch or Mouse event.

To fix it, maybe Gridstack should also handle Pointer events.

Test - by attaching all events to the ".ui-resizable-handle" element, the result obtained on MS Surface is this

[adumesny]

I don't have an MS surface tablet (maybe @radiolips does?) to test this out - would be great if you could make a code review with the fix! then we can get it in...

https://github.com/gridstack/gridstack.js#touch-devices-support
has more info.

[adumesny]

this is likely fixed in up-coming v3.2 (I have no ms surface to test) with #1589 as the latest branch of jquery.ui.touch-punch has this in code:

    // Detect touch support - Windows Surface devices and other touch devices
    $.support.mspointer = window.navigator.msPointerEnabled;		

    // Microsoft Surface Support = remove original touch Action
    if ($.support.mspointer) {
      self.element[0].style.msTouchAction = 'none';
    }	  

so closing. also "gridstack.js last version" when filling a bug doesn't help me figure out how to reproduce looking back!