hootsuite / grid

Drag and drop library for two-dimensional, resizable and responsive lists
http://hootsuite.github.io/grid/
Apache License 2.0
3.57k stars 279 forks source link

Touchscreen interaction incompatible/inconsistent #93

Closed asmarkis closed 8 years ago

asmarkis commented 8 years ago

I can drag items on the grids all I want with a mouse, but on touch screen devices there is simply no way to easily and consistently drag items around with the code as it is now.

I noticed that with Edge browser, if you hold your touch for long enough, it will start to move but then immediately stop and try to show the context menu. In firefox, you can actually move and tap them! But, you must hold down your finger for a rather precise amount of time before you can move it. And finally, I was only able to get Chrome to work (rather well!) by adding the "jQuery UI Touch Punch" script to the page. Unfortunately, this made it require a very precise 'tap' in order to actually 'click' on the item. This was all tested using a Microsoft Surface 3.

I would like to know if there is any way that a plugin could be used, or a modification to the code in order to make this behavior more consistent across browsers? Any information/suggestions/answers are much appreciated!

asmarkis commented 8 years ago

Conveniently, I just found an interesting discussion that Edge defaults to not recognizing touch events in its settings. After using the "Touch Punch" and setting the touch event to On, Edge works as it should. Similarly, Firefox may have the property "dom.w3c_touch_events.enabled" set to 0 (off), instead of 2 (auto-detect). So the touch input capability are browser issues, but adding these bits of code makes the grid play more nicely with it.

Also, in case anyone is interested, I also added the following code to disable the right-click context menu because the Surface will treat a long press as a right-click.

window.oncontextmenu = function(event) { event.preventDefault(); event.stopPropagation(); return false; };