jQuery UI Drag and Drop with .trigger()

Question

I'm trying to 'trigger' a drag and drop manually without the interaction of a mouse/user.

So far I have been able to setup the jQuery UI demo for drag and drop but unable to trigger the drag and drop using the trigger() method.

Can anyone help with setting this up?

My code so far is:

  $(function() {
      $( "#draggable" ).draggable();
      $( "#droppable" ).droppable({
      drop: function( event, ui ) {
        $( this )
        .addClass( "ui-state-highlight" )
        .find( "p" )
        .html( "Dropped!" );
      }
    });

    $('#draggable').trigger("drop", $('#droppable'));
  });

Thanks in advance!

To make things simpler. All I want to be able to do is call the 'drop' method from anywhere outside of the droppable() but I will always need to be able to specify the event and ui objects.

possibly dupe of [How do I trigger the Drop event with jQuery UI Droppable without actually dragging and dropping?](http://stackoverflow.com/questions/3188130/how-do-i-trigger-the-drop-event-with-jquery-ui-droppable-without-actually-draggin) — MikeM, Mar 28 '11 at 02:52
It does say to create a var drop_function = $("#droppable").droppable('option', 'drop'); drop_function(); but where do I reference #draggable in this function? — , Mar 28 '11 at 03:19
This isn't an answer, I just don't understand your question. What event is going to make the drag and drop happen if not some interaction with a user? — David Rhoden, Mar 28 '11 at 00:47
There is no specific "event". I just need to simulate the drag and drop process and any functions which occur after the drop - as if the user was actually dragging and dropping. Think of it as Opening a saved file... — , Mar 28 '11 at 01:21
Did you ever find a solution? I find myself asking the exact same thing at the moment! — DA., Jan 22 '14 at 01:48
Neither found a solution, but feel free to play around with http://jsfiddle.net/tW638/ , which simply contains the above JS code — Jan, Jun 04 '14 at 09:09
http://stackoverflow.com/a/29284621/278405?programmatically-drag-and-drop-element-onto-another-element — cychoi, Mar 28 '15 at 20:05

score 2 · Answer 1 · answered May 29 '14 at 15:19

Why not to create a custom event trigered by the drop? So you can trigger it yourself:

$(function(){
    $( "#draggable" ).draggable();
    $( "#droppable" ).droppable({
        drop: function( event, ui ) {
            $(this).trigger("customEvent", ui);
        }
    });
    $( "#droppable" ).bind("customEvent", function(event, ui ){         
        $( this )
                .find( "p" )
                    .html( "Dropped!");
    });  
   $( "#droppable" ).trigger("customEvent", $( "#draggable" ));  
});

score 0 · Answer 2 · answered Mar 28 '11 at 00:40

0

I think what you want is:

$('#droppable').trigger('drop', $('#draggable'));

But even then, I wonder if the draggable element will make its way to the droppable as what got dropped...

answered Mar 28 '11 at 00:40

Groovetrain

3,315
19
23

4

I can't seem this to trigger a drop on the droppable. No console error, but no triggered drop event, either. – DA. Jan 22 '14 at 02:01

jQuery UI Drag and Drop with .trigger()

2 Answers2