title: jQuery Draggable - Image Map line drawing
body: <p>Like the title says, I am doing some line drawing for an image map. The problem is that the farther my mouse goes from the original coordinates, the slower the line draws. There is obviously something wrong with my math. Could someone who is good with math check this out for me and tell me whats wrong?</p>
  
  <pre><code>    $('map area.dp').draggable({
      axis: 'x',
      cursor: 'crosshair',
      helper: function (e) {
          var h = $('&lt;div class="drag-helper"&gt;&lt;/div&gt;').attr('name', $(this).attr('name'));
          return h;
      },
      start: function (e, ui) {
  
          //orignal "constant" datapoint coords
          oX = parseInt(this.coords.split(',')[0]);
          oY = parseInt(this.coords.split(',')[1]);
  
          //ratio = "variable" mouse position / orginal data point
          ratX = e.pageX / oX;
          ratY = e.pageY / oY;
  
  
          //set new datapoint to draw line to by dividing mouse poistion by ratio as mouse moves across the screen
          ui.offset.left = e.pageX / ratX;
          ui.offset.top = e.pageY / ratY;
  
          var scrlTp = $('html')[0].scrollTop;
          var scrlLft = $('html')[0].scrollLeft;
  
          ui.offset.left -= scrlLft;
          ui.offset.top -= scrlTp;
  
  
          ui.position.left = ui.offset.left
  
          ui.helper.css('top', (ui.offset.top) + 'px');
          ui.helper.css('left', (ui.offset.left) + 'px');
  
          var d = $('&lt;div id="DragLine"&gt;&lt;/div&gt;').css('top', (ui.offset.top) + 'px').css('left', (ui.offset.left) + 'px').appendTo($('map'));
      },
      drag: function (e, ui) {
  
  
          var scrlTp = $('html')[0].scrollTop;
          var scrlLft = $('html')[0].scrollLeft;
  
          ui.offset.left = e.pageX / ratX
          ui.offset.top = e.pageY / ratY
  
          ui.offset.left -= scrlLft;
          ui.offset.top -= scrlTp;
  
          ui.position.left = ui.offset.left;
  
          if (ui.offset.left &gt; px100) {
              ui.offset.left = px100;
              ui.position.left = px100;
          }
  
  
          var diff = (ui.position.left - ui.originalPosition.left);
          if (diff &lt; 0) {
              $('#DragLine').css('left', (ui.position.left + 4) + 'px').css('width', (diff * -1) + 'px');
          }
          else {
              $('#DragLine').css('left', (ui.originalPosition.left + 4) + 'px').css('width', diff + 'px');
          }
  
          ui.helper.text(pxToVal(ui.position.left));
      },
      stop: function (e, ui) {
          $('#DragLine').remove();
  
          var mp = $('#MainForm #Settings_MovedPoints');
          var key = ui.helper.attr('name');
          var val = pxToVal(ui.position.left);
          strPts = mp.val();
          var pts;
          if (strPts) {
              pts = JSON.parse(strPts);
          }
  
          //set the new dictionary
          if (!pts) { pts = {}; }
          pts[key] = val;
  
          strPts = JSON.stringify(pts);
          mp.val(strPts);
  
          $('#MainForm').submit();
      }
  
  })
  </code></pre>