title: how to trigger a drag event on click of a button jquery ui
body: <p>Im attempted to integrate an image cropping tool into my website.
  Im using this <a href="http://www.trepmag.ch/z/jrac/example/" rel="nofollow">http://www.trepmag.ch/z/jrac/example/</a></p>
  
  <p>While it works perfectly on the example, unfortunately Im my own site it is not so smooth.</p>
  
  <p>When I drag the box across the screen, it will not always update the co-ordinates unless I drag it a tiny bit more at the end.</p>
  
  <p>My plan was to simply take the co-ordinates and send them to the server, but this is holding me up as its taking incorrect co-ordinates. Even if I drag the cropping area by another pixel it at the end it updates them correctly.</p>
  
  <p>My thinking was to simply trigger an automatic drag of an insignificant amount (like .1px) to get the correct co-ordinates. However I have no idea how to trigger a drag event.</p>
  
  <p>I was thinking of using <code>mousedown</code> but I still do not know how to tell it to drag.</p>
  
  <p>Here is the plugin code itself 
  <a href="http://www.trepmag.ch/z/jrac/jrac/jquery.jrac.js" rel="nofollow">http://www.trepmag.ch/z/jrac/jrac/jquery.jrac.js</a></p>
  
  <p>EDIT: Here is the code of the event handling...</p>
  
  <pre><code>$('#output img').jrac({
    'crop_width': 250,
    'crop_height': 170,
    'crop_x': 100,
    'crop_y': 100,
    'image_width': 400,
    'viewport_onload': function() {
      alert('viewport loaded');
      var $viewport = this;
      var inputs = $('#coordinates').find('.coords input:text');
      var events = ['jrac_crop_x','jrac_crop_y','jrac_crop_width','jrac_crop_height','jrac_image_width','jrac_image_height'];
      for (var i = 0; i &lt; events.length; i++) {
  
        var event_name = events[i];
        // Register an event with an element.
        $viewport.observator.register(event_name, inputs.eq(i));
        // Attach a handler to that event for the element.
        inputs.eq(i).bind(event_name, function(event, $viewport, value) {
          $(this).val(value);
        })
        // Attach a handler for the built-in jQuery change event, handler
        // which read user input and apply it to relevent viewport object.
        .change(event_name, function(event) {
          var event_name = event.data;
          $viewport.$image.scale_proportion_locked = $('#coordinates').find('.coords input:checkbox').is(':checked');
          $viewport.observator.set_property(event_name,$(this).val());
        });
      }
      $viewport.$container.append('&lt;div&gt;Image natual size: '
        +$viewport.$image.originalWidth+' x '
        +$viewport.$image.originalHeight+'&lt;/div&gt;')
    }
  })
  // React on all viewport events.
  .bind('jrac_events', function(event, $viewport) {
    var inputs = $('#coordinates').find('.coords input');
    inputs.css('background-color',($viewport.observator.crop_consistent())?'chartreuse':'salmon');
  });
  </code></pre>