15

I have a droppable with a drop event handler:

$(this).droppable({
  drop:function(){
    console.log('OMG You Dropped It!');
  }
});

I have a draggable:

$(this).draggable();

What I want to do is trigger the drop event handler on the droppable without actually dragging and dropping the draggable. I want to simulate the actual behavior without physically performing the behavior.

I thought something like this would do:

$(droppable).trigger('drop', [draggable]);

Unfortunately, it's not quite that simple. Does anyone know how I can accomplish this?

Kappers
  • 1,341
  • 3
  • 15
  • 26
  • http://stackoverflow.com/a/29284621/278405?programmatically-drag-and-drop-element-onto-another-element – cychoi Mar 28 '15 at 20:03

3 Answers3

11

You should move the code in your drop handler to a separate function.
You can then call the function both in the handler and elsewhere.

SLaks
  • 868,454
  • 176
  • 1,908
  • 1,964
  • 1
    The above is simplified sample code to illustrate what I want to accomplish, not *the* code. Anyway, how would this resolve my issue? – Kappers Jul 06 '10 at 16:27
  • You can call the function instead of triggering the event. – SLaks Jul 06 '10 at 16:37
9

You can trigger the function associated with the drop call via the option-method:

$("#droppable").droppable({
        drop: function(event, ui) {
            do stuff }
    });
var drop_function = $("#droppable").droppable.option('drop');
drop_function();

This way you get whatever would happen when dropping something on droppable. Of course you could just execute the function instead of assigning it. It's nonetheless a good idea to assign a function to drop, that you define somewhere else, just for clarities sake.

ajmurmann
  • 1,605
  • 3
  • 16
  • 24
  • 2
    +1 for being able to call outside of scope of the original function definition (e.g.) during a QUnit test. – StuperUser Dec 07 '10 at 11:50
  • 4
    New syntax is: $("#droppable").droppable('option', 'drop'). – StuperUser Dec 07 '10 at 11:54
  • @StuperUser i don't get it. how does the $("#droppable") know which element was dragged and droped on it? – adardesign Dec 08 '10 at 21:51
  • In the 'drop' event handler function for the droppable, the dropped element is: `ui.draggable`. Check the drop event: http://jqueryui.com/demos/droppable/#event-drop for more details. – StuperUser Dec 09 '10 at 11:11
  • @StuperUser How do you init both of the params during function call? drop_function('event','ui-draggable'); – Roy Lee Jul 31 '12 at 07:16
  • @Roylee You don't init them, the jQueryUI code that raises the events passes the event object and the ui object to the function. The ui object contains draggable as a member `ui.draggable`. – StuperUser Jul 31 '12 at 08:57
  • @StuperUser yeah, now we are trying to simulate/take into control instead of letting it happened automatically. That's why you let the drop_function be called outside. – Roy Lee Jul 31 '12 at 09:24
  • I see now. Since the params are just objects passed to the function, depending on what your `drop_function` does (how it uses the event and ui params), populating it with an object with a member called draggable e.g. `{ draggable : $('#elementYouWantToPassId')[0] }`, then when you call that function, you'll use that object and the draggable. – StuperUser Jul 31 '12 at 09:49
  • In my case, `element.draggable('option', 'drag')();` – Engineer Oct 29 '13 at 23:53
  • Any chance someone can update this for 2014? I'm trying some of the examples in the comments but still can't quite figure out the syntax for triggering a drop. – DA. Jan 22 '14 at 02:11
1

As pointed by StuperUser and based on ajmurmann's answer, with the recent versions of jQuery you should do:

$("#droppable").droppable({
    drop: function(event, ui) {
        do stuff }
});
var drop_function = $("#droppable").droppable('option', 'drop');
drop_function();
Timothée Jeannin
  • 9,652
  • 2
  • 56
  • 65