jquery ui error for ui.draggable(“destroy”)

问题:

I want to remove the drag property of a <div> when I drop it on a container. But I get an error "Property 'draggable' of object #<Object> is not a function", for my code below.

$( "#fighter1" ).draggable(); //fighter1 is the id of draggable object
$( "#fighter2" ).draggable();
$( "#fighter3" ).draggable();
$( "#fighter4" ).draggable();
$( "#fighter5" ).draggable();
$( "#fighter6" ).draggable();
$( "#dest" ).droppable({      //dest is the id of droppable object
   drop: function( event, ui ) {
      ui.draggable("destroy"); //I get error here.
   }
});

I use the jquery ui version 1.8.12

回答1:

My guess is that 'ui' is a simple old javascript object rather than a jQuery object.
Try (REVISED):
$(ui.draggable).draggable("destroy");

回答2:

The syntax for calling methods of draggable widget is:

$( ".selector" ).draggable( "method" );

You should pass the method name as a string to the draggable() method.

Inside the drop event callback, ui.draggable is just a reference to the jQuery object corresponding to the draggable element (the $( ".selector" ) part of syntax).

You should actually invoke draggable() on it and pass the method name:

ui.draggable.draggable("destroy");
----^-------        ------^------
selector                method name
       --------^--------
   this guy executes the method

回答3:

I resolved this problem using setTimeout function:

setTimeout(function(a){a.draggable("destroy");},100,ui.draggable);