title: Drag/Reposition Element On touchmove not working
body: <p>I have a fixed window on my screen that I would like the user to be able to drag around the screen. While I have set this up to work for mouse inputs, I am having more difficulty getting this to work for touch screens.</p>
  <p>So I have a basic box like so:</p>
  <pre><code>&lt;div id=&quot;smallavatar&quot; class=&quot;smallbox&quot;&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Which is then immediately followed by this JS (note that the first half is for the click events)</p>
  <pre><code>var divOverlay = document.getElementById (&quot;smallavatar&quot;);
  var isDown = false;
  divOverlay.addEventListener('mousedown', function(e) {
      isDown = true;
  }, true);
  
  document.addEventListener('mouseup', function() {
    isDown = false;
  }, true);
  
  document.addEventListener('mousemove', function(event) {
     event.preventDefault();
     if (isDown) {
     var deltaX = event.movementX;
     var deltaY = event.movementY;
    var rect = divOverlay.getBoundingClientRect();
    divOverlay.style.left = rect.x + deltaX + 'px';
    divOverlay.style.top  = rect.y + deltaY + 'px';
   }
  }, true);
  
  divOverlay.addEventListener('touchstart', e =&gt; {
    clientX = e.touches[0].screenX;
    clientY = e.touches[0].screenY;
  });
  
  divOverlay.addEventListener('touchmove', e =&gt; {
    let x =  divOverlay.style.left;
    let y =  divOverlay.style.top;
    // Compute the change in X and Y coordinates. 
    // The first touch point in the changedTouches
    // list is the touch point that was just removed from the surface.
    
    deltaX = e.changedTouches[0].clientX - clientX;
    deltaY = e.changedTouches[0].clientY - clientY;
    
    divOverlay.style.left = divOverlay.style.left + deltaX;
    divOverlay.style.top = divOverlay.style.top + deltaY;
      
  });
  </code></pre>
  <p>Finally the following CSS is being used:</p>
  <pre><code>.smallbox{position:fixed; bottom:70px; right:0; width:360px;  height:400px; z-index:20;}
  </code></pre>
  <p>Now while the touchmove event does work, the problem is that the box seems to fly off the screen very quickly. The idea is supposed to be that I'm trying to get the position the div was using before the touch event started, then work out how much movement has occured in the touchmove event and then from that update the left and top values with the new position it should be in.</p>
  <p>Is there anything wrong that would explain why this isn't working as expected?</p>