title: How to find offset position with touchmove?
body: <p>I have a really simple code for dragging/moving an element via touchscreen. The code works fine, the only problem is a common problem, but no matter how I try I cannot fix the code to drag from the touchpoint. Instead every movement starts from the edge of the element regardless of initial touch position.</p>
  
  <p>I have seen a few suggestions but all have failed. I am hoping the smaller simpler code will attract a simple fix.</p>
  
  <p>Here is the JavaScript:</p>
  
  <pre><code>   &lt;script&gt;
      $("#drag").on('touchmove',function(e){
  
  
  // This is supposed to be the fix, 
  // but regardless of positioning 
  // (relative parent) of the divs,
  // it is failing ---
  
  
     var offset = $(this).offset();
      var relX =(e.clientX - offset.left);
  
  // By rights the above is the correct solution. But I
  // cannot suss out why it is not working.
  
     var touch = e.originalEvent.touches[0];
      var x = touch.clientX
  
     $(this).css({
      "-webkit-transform": "translate3d("+ x +"px,"+ 0 +"px,0)"
      }); 
     });              
    &lt;/script&gt;
  
  
    &lt;! --And here is the html --&gt;
  
  &lt;body&gt;               
     &lt;div id="container" class="container"&gt;              
      &lt;div id='drag' class='drag'&gt;               
      &lt;!---contents---&gt;                
      &lt;/div&gt;                 
    &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong>                   </p>
  
  <pre><code>#container {
   position:relative;
   top: 0%;
   left: 0px;
   width: 500px;
   height: 500px;
   background: #ccc;
  }
  
  #drag {
   position:absolute;
   top: 20%;
   left: 10px;
   width: 150px;
   height: 10%;
   background: #0a0;
  }
  </code></pre>