title: jQuery UI sortable touch duration
body: <p>I'm developing a comparison site where you're able to sort items horizontally using jQuery UI's sortable function. All items are within a container which can be scrolled horizontally or vertically.
  It works fine on desktop and I'm trying to make it work on tablets.</p>
  
  <p><img src="https://i.stack.imgur.com/fejAq.jpg" alt="Comparison"></p>
  
  <p>I could already make the sortable functionality work on tablets by the following: <a href="http://jsfiddle.net/yDRuL/" rel="nofollow noreferrer" title="jsFiddle">jsFiddle</a></p>
  
  <pre><code>document.addEventListener("touchstart", module.bindTouchHandler, true);
  document.addEventListener("touchmove", module.bindTouchHandler, true);
  document.addEventListener("touchend", module.bindTouchHandler, true);
  document.addEventListener("touchcancel", module.bindTouchHandler, true); 
  
  module.bindTouchHandler = function(event){
      var touch = event.changedTouches[0];
  
      var simulatedEvent = document.createEvent("MouseEvent");
      simulatedEvent.initMouseEvent({
          touchstart: "mousedown",
          touchmove: "mousemove",
          touchend: "mouseup"
      }[event.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();
  }  
  </code></pre>
  
  <p>The problem is that the different touch events prevent now the possibility to scroll horizontally/vertically. I'd like to have a delay on this. Like only start sorting/dragging the element if the user's touching it for 2 seconds.</p>
  
  <p>How can I handle this?</p>