title: jQuery: How Do I simulate Drag and Drop in Code?
body: <p>EDIT: Here's a link to show you my sample code: <a href="http://www.singingeels.com/jqtest/" rel="noreferrer">http://www.singingeels.com/jqtest/</a></p>
  
  <p>I have a very simple page that references jquery-1.3.2.js, ui.core.js (latest version) and ui.draggable.js (also latest version).</p>
  
  <p>I have a div that I can drag around very easily (using the mouse of course):</p>
  
  <pre><code>&lt;div id="myDiv"&gt;hello&lt;/div&gt;
  </code></pre>
  
  <p>and then in JavaScript:</p>
  
  <pre><code>$("#myDiv").draggable();
  </code></pre>
  
  <p>This is works perfectly. But, I need to be able to simulate a 'drag and drop' using code alone. <strong>I have it mostly working, but the problem is that the events that are firing are the placeholder events</strong>.</p>
  
  <p>If you open "ui.core.js" and scroll to the bottom... you'll see this:</p>
  
  <pre><code>// These are placeholder methods, to be overriden by extending plugin
  _mouseStart: function(event) { },
  _mouseDrag: function(event) { },
  _mouseStop: function(event) { },
  _mouseCapture: function(event) { return true; }
  </code></pre>
  
  <p>Why aren't the events being extended properly in my simulation, but when you click down with the mouse, they are? - Any ideas on how to force the _mouseDrag: property to obey the overriding extension in "ui.draggable.js"?</p>
  
  <p>Solving this would be huge - and I plan to show the major benefits later.</p>
  
  <p>Thanks,
  -Timothy</p>
  
  <p>EDIT: Here's a link to show you my sample code: <a href="http://www.singingeels.com/jqtest/" rel="noreferrer">http://www.singingeels.com/jqtest/</a></p>
  
  <p>EDIT 2: Click that link above and view-source... you'll see what I'm trying to do. Here's a snippet:</p>
  
  <pre><code>$(document).ready(function() {
      var myDiv = $("#myDiv");
  
      myDiv.draggable();
  
      // This will set enough properties to simulate valid mouse options.
      $.ui.mouse.options = $.ui.mouse.defaults;
  
      var divOffset = myDiv.offset();
  
      // This will simulate clicking down on the div - works mostly.
      $.ui.mouse._mouseDown({
          target: myDiv,
          pageX: divOffset.left,
          pageY: divOffset.top,
          which: 1,
  
          preventDefault: function() { }
      });
  });
  </code></pre>