title: Enable scrolling with drag-n-drop on touch devices
body: <p><img src="https://i.stack.imgur.com/NSAsU.png" alt="table with horizontal scroll on touch devices"></p>
  
  <p>Re-arranging columns and click is now working on touch devices. Now facing the issue with scrolling. I tried to resolve it with <code>iScroll</code> plugin but it didn't work. The screenshot I took from device mode of <code>chrome</code> browser. </p>
  
  <p>Table columns can be added on-the-fly and so number of columns may vary.</p>
  
  <p>Is there any <code>css</code> way to work scrolling properly ??? If not how do I implement it with <code>javascript</code> or <code>jquery</code> ???</p>
  
  <p><strong>Update:</strong>
  -webkit-overflow-scrolling: touch; is not working.</p>
  
  <p><strong>Update 2:</strong>
  Tried with below code:</p>
  
  <pre><code>if (Modernizr.touch) {
              $('.container-fluid').css('overflow', 'auto');            
          }
  </code></pre>
  
  <p>and this one as well: </p>
  
  <pre><code> if (Modernizr.touch) {            
                //iScroll plugin                
                var myScroll = new IScroll('#tblGrid', {               
                      scrollbars: true
                  });
              }
  </code></pre>
  
  <p>None of them worked.</p>
  
  <p><strong>Update 3:</strong></p>
  
  <p>Below is the code to enable dragging of table columns and click event:</p>
  
  <pre><code>var clickms = 200;
      var lastTouchDown = -1;
  
      function touchHandler(event) {
          var touch = event.changedTouches[0];
  
          var d = new Date(); var type = "";
          switch (event.type) {
              case "touchstart": type = "mousedown"; lastTouchDown = d.getTime(); break;
              case "touchmove": type = "mousemove"; lastTouchDown = -1; break;
              case "touchend": if (lastTouchDown &gt; -1 &amp;&amp; (d.getTime() - lastTouchDown) &lt; clickms) { lastTouchDown = -1; type = "click"; break; } type = "mouseup"; break;
              default: return;
          }
  
          var simulatedEvent = document.createEvent("MouseEvent");
          simulatedEvent.initMouseEvent(type, true, true, window, 1,
          touch.screenX, touch.screenY,
          touch.clientX, touch.clientY, false,
          false, false, false, 0, null);
  
          touch.target.dispatchEvent(simulatedEvent);
          event.preventDefault();
      }
  
  function init() {
          document.addEventListener("touchstart", touchHandler, true);
          document.addEventListener("touchmove", touchHandler, true);
          document.addEventListener("touchend", touchHandler, true);
          document.addEventListener("touchcancel", touchHandler, true);
      }
  $(document).ready(function () { 
  
  init();
  
          var myScroll;
          function loaded() {
              myScroll = new IScroll('#tblGrid', {
                  mouseWheel: true,
                  scrollbars: true,
                  click: true,
                  eventPassthrough: true,
                  tap: true
              });
          }
          if (Modernizr.touch) {            
              loaded();
          }
  
  });
  </code></pre>
  
  <p><strong>Update 4:</strong></p>
  
  <p>I tried to use <code>iScroll 4</code> and scrolling now works. But when I rearrange/drag-drop columns, the scrolling also works and in that case Drag-drop does not work properly due to <code>touchmove</code> event.</p>
  
  <p>And <code>jquery.floatThead</code> also stopped working which fixes the headers.</p>