Improving Touch Support in JavaScript Applications

Wijmo uses HTML5 drag-drop for many different things, including:

• Dragging columns on FlexGrid
• Grouping data on GroupPanel
• Creating views on PivotPanel

Unfortunately, most mobile browsers do not support touch-based HTML5 drag/drop, and that limits the functionality of those controls.

To address this issue, we created a DragDropTouch polyfill that makes drag-drop work on touch devices the same way it does on desktop machines. You can read about the polyfill on this CodeProject article.

How to Add Touch Support to JavaScript Applications

In the latest release, we made it easier to support drag/drop operations on touch devices by moving the DragDropTouch polyfill into a new wijmo.touch module.

Import the wijmo.touch module and users will be able to perform drag-drop operations on all devices, using the mouse or touch.

For example:

 // support drag/drop on touch devices  
 // users will be able to drag fields using touch  
 // on their mobile devices  
 import '@grapecity/wijmo.touch'; 

 import { PivotEngine, PivotPanel, PivotGrid } from '@grapecity/wijmo.olap';

 // create a PivotEngine  
 let ng = new PivotEngine({  
     itemsSource: getData(), // raw data  
     valueFields: ['Amount'], // summarize amounts  
     rowFields: ['Buyer', 'Type'] // summarize amounts  
 });

 // show pivot panel  
 new PivotPanel('#thePanel', {  
     itemsSource: ng  
 });

 // show pivot grid  
 new PivotGrid('#theGrid', {  
     itemsSource: ng  
 });

We hope you enjoy the new wijmo.touch module and use it to improve touch support on your apps.