How to use ajax_command_invoke() with an argument that's a JavaScript object? I'd like to use ajax_command_invoke() to enable jQuery UI Droppable when returning from an AJAX request.

If I run the following command from the JavaScript console, jQuery UI Droppable is properly enabled:

jQuery('.elements-to-make-droppable').droppable({
  drop: function( event, ui ) {
    jQuery( this )
      .addClass( "ui-state-highlight" )
  }
});


However, when I try to return this command from my AJAX callback:

$commands = array();
$commands[] = ajax_command_invoke('.elements-to-make-droppable', 'droppable', array('{
  drop: function( event, ui ) {
    jQuery( this )
      .addClass( "ui-state-highlight" )
  }
}'));
return array('#type' =&gt; 'ajax', '#commands' =&gt; $commands);


...it doesn't work.

How should I be doing this?
I solved this by creating a little jQuery Plugin that calls droppable(), and using ajax_command_invoke() to call my plugin.

In the PHP code that builds the page, I added:

drupal_add_js(drupal_get_path('module', 'my_module') . '/my_module.js');


In my_module.js, I added:

jQuery.fn.my_module_make_droppable = function() {
  jQuery(this).droppable({
    drop: function(event, ui) {
      jQuery(this).addClass( "ui-state-highlight" );
    }
  });
}


And my AJAX callback is now:

$commands = array();
$commands[] = ajax_command_invoke('.elements-to-make-droppable', 'my_module_make_droppable');
return array('#type' =&gt; 'ajax', '#commands' =&gt; $commands);