Programmatically trigger jQuery-UI drag and drop event

Question

I am trying to fire a drag event in a div immediately after it is connected using the jQuery-UI draggable widget. I have a code that disconnects when it is being dragged, and I would also like to run this code right after the page loads. I sometimes do this on other jQuery handlers using this idiom:

 $('.foo').on('bar', function() { console.debug('bar!'); }).trigger('bar'); 

This does not work with draggable . Here is my code:

 var draggable = $('[draggable]').draggable({ drag: function(event, ui) { //do some stuff console.debug(event); } }).trigger('drag'); 

The drag handler is called when I drag an item, but not onto the page load.

Information that may be relevant:

• When I drag an item, the event that appears in the console looks like this:

   jQuery.Event { type: "drag", target: div#myElementId.ui-draggable, currentTarget: document, delegateTarget: document, data: null, //lots of other properties } 

• I tried various settings and nothing worked:

  • Using the jQuery.Event constructor and manually configure the above properties.
  • Specifying the exact element I want with document.getElementById
  • Running mousedown or mousedown.draggable instead of drag (this was based on some kind of workaround I found)
    
    

• Yes, I understand that I can simply define the handler separately. Part of the reason I want to do this is to access the ui parameter, which gives me an easy way to get the position and offset of an element. I could find them differently, but it was annoying. I am also wondering why this is not working.

• Searches on Google and SO did not find solutions, as well as workarounds that have nothing to do with me, as well as other complaints about the same problem. Jörn Zaefferer of the jQUI team recommended the jQuery.simulate plugin as a workaround, so this might just be impossible. It seems strange that they are not consistent with other jQuery events.

Answer 1

Here is the jQuery ui plugin

https://github.com/jquery/jquery-ui/blob/9e8e339648901899827a58e5bf919f7dda03b88e/tests/jquery.simulate.js

indicate what's on the page and then just use

 $("#myElement").simulate('drag'); 

Answer 2

try it like

 var draggable = $('[draggable]').draggable({ drag: function(event, ui) { dostuff(ui); } }); function dostuff(ui){ //do stuff with ui }