title: How to trigger draggable behaviour programmatically
body: <p>I've created a "2d slider" in jQuery in which 2 parameters are manipulated simultaneously by dragging a "handle" within a bounding box.</p>
  
  <p>I've implemented this by nesting a "handle" div within a parent div, and using the jQuery UI plugin to facilitate the dragging behaviour. The html looks like: </p>
  
  <pre><code>&lt;div class="Slider2d" id="grid_spacing_both"&gt;
      &lt;div class="Slider2dHandle" id="grid_spacing_both_handle"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The jQuery looks like: </p>
  
  <pre><code>$(".Slider2dHandle").draggable({
      containment: "parent",
      scroll: false,
      drag: function(event, ui) {
          // calculates position and updates value input boxes
      }
  });
  </code></pre>
  
  <p>I've also created some code that repositions the handle to the location of any clicks within the parent div:</p>
  
  <pre><code>$(".Slider2d").mousedown(function(event){
      // get location of click and reposition handle to click location
  });
  </code></pre>
  
  <p>What I would like to do is modify the above method so that the user can click somewhere in the parent div, have the handle repositioned to the click location, and then begin dragging the handle without letting the mouse button up. Basically, I need to figure out a way to programmatically trigger the drag functionality. </p>
  
  <p>I found a few suggestions <a href="https://stackoverflow.com/questions/5239649/can-click-on-jquery-draggable-parent-start-drag">here</a> and <a href="https://stackoverflow.com/questions/3672222/jquery-start-dragging-object-when-clicked-on-the-other">here</a>, and attempted to implement their recommendations by changing the above method like so:</p>
  
  <pre><code>$(".Slider2d").mousedown(function(event){
      // get location of click and reposition handle to click location
      handle = $(".Slider2d").children(".Slider2dHandle");
      handle.trigger(event);
  });
  </code></pre>
  
  <p>This works in the most technical sense, but its super slow and I get a bunch of error messages from Safari telling me "RangeError: Maximum call stack size exceeded." What I'm thinking is happening is that the when I trigger the event on the handle, it bubbles up to the parent, which then calls the trigger again and so on and so on. I've tried to stop the bubbling by throwing an event.stopPropagation into my code before and after the .trigger() call, but to no avail.</p>
  
  <p>So, if anyone has any suggestions on how to get this working I'd really appreciate it. I have a backup plan <a href="https://github.com/jquery/jquery-ui/blob/9e8e339648901899827a58e5bf919f7dda03b88e/tests/jquery.simulate.js" rel="nofollow noreferrer">here</a>, but this seems to me to be unnecessarily complicated.</p>
  
  <p>Thanks!</p>