title: Drag drop on mobile devices using some code that translates event (code included), but normal events are not working
body: <p>I am using the below code to allow for touch drag and drop on my website. However, while the parts of my code which have drag/drop functionality work, on an iPhone, I cannot scroll or move the page in anyway. I can drag &amp; drop, but regular iPhone touch functionality is gone!</p>
  
  <p>I have found the below snippet in several Stack Overflow responses so I am wondering if there is a workaround for this. I want to be able to drag &amp; drop on both web and mobile.</p>
  
  <p>My dragging code (just a list):</p>
  
  <pre><code>$(function() {
      $(".drag_me ul").sortable();
  });
  </code></pre>
  
  <p>code for touch events:</p>
  
  <pre><code>function touchHandler(event)
  {
   var touches = event.changedTouches,
      first = touches[0],
      type = "";
  
       switch(event.type)
  {
      case "touchstart": type = "mousedown"; break;
      case "touchmove":  type="mousemove"; break;        
      case "touchend":   type="mouseup"; break;
      default: return;
  }
  var simulatedEvent = document.createEvent("MouseEvent");
  simulatedEvent.initMouseEvent(type, true, true, window, 1,
                            first.screenX, first.screenY,
                            first.clientX, first.clientY, false,
                            false, false, false, 0/*left*/, null);
  
  first.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);    
  }
  </code></pre>