How to programmatically invoke jQuery UI Draggable drag start?

Question

I create a new jQuery element after the mouse is in a down position and before it is released. (After mousedown).

I would like to programmatically trigger dragging on the new element using jQuery UI, so that it will automatically begin dragging with my mouse movement. I don't want to have to release and then click the mouse again.

I have tried the following...

var element = $("<div />");
element.appendTo("body").draggable().trigger("mousedown");

...however this does not work.

Does anyone have any suggestions on how to accomplish this?

---

UPDATE: After some searching the poster of this question has the identical problem. However the suggested solution, which boils down to...

$("body").on("mousedown", function(e) { 
  $("<div />").draggable().appendTo("body").trigger(e);
});

...no longer works in the latest versions jQuery and jQuery-UI, and instead generates a Maximum Call Stack Exceeded error.

Answer 1

The draggable plugin expects its mousedown events to use its namespace and to point to the draggable object as the target. Modifying these fields in the event works with jQuery 1.8.3 and jQuery UI 1.9.2.

$("body").on("mousedown", function(e) { 
  var div = $("<div />").draggable().appendTo("body");
  e.type = "mousedown.draggable";
  e.target = div[0];
  div.trigger(e);
});

Demo here: http://jsfiddle.net/maCmB/1/

Answer 2

UPDATE:

See fuzzyBSc's answer below. It's the proper way to do this.

---

This is totally a hack, but it seems to do the trick:

  var myDraggable = $('#mydraggable').draggable();
  
  // Yeah... we're going to hack the widget
  var widget = myDraggable.data('ui-draggable');
  var clickEvent = null;
  
  myDraggable.click(function(event){
      if(!clickEvent){
        widget._mouseStart(event);
        clickEvent = event;
      }
      else {
        widget._mouseUp(event);
        clickEvent = null;
      }
    });
  
  $(document).mousemove(function(event){
    console.log(event);
    if(clickEvent){
      // We need to set this to our own clickEvent, otherwise
      // it won't position correctly.
      widget._mouseDownEvent = clickEvent;
      widget._mouseMove(event);
    }
  });

Here's the plunker

My example uses an element that already exists instead of creating one, but it should work similarly.