jQuery-UI draggable error 'cannot call methods

Question

I was working the draggable plugin fine while using jQuery-UI 1.8.2, then I changed to 1.10.1. The major difference I found was that in enabling and disabling the plugin, I no longer needed to use:

$this.draggable('option', 'disabled', true);

but could simply use

$this.draggable('disable');

But then I realized there's another problem. I get this error, which messes up my entire program, and I don't know how to fix it:

Error: cannot call methods on draggable prior to initialization; attempted to call method 'enable'

To fix it, I ensured that I always call $this.draggable('enable'); before any further options, but it didn't make a difference. What's the problem?

Answer 1

Expanding on what LeGEC said...

$this.draggable(); is being called before $this.draggable('enable');

For me the solution would be to chain the event like this...

$this.draggable().draggable('disable');

First declaring that $this is a draggable, then declaring that it is dissabled

Answer 2

I had a similar issue when upgrading from jquery 1.6.1 to 1.9.1

var tr$ = $('<tr>', { draggable: 'true' }); 

threw "cannot call methods on draggable prior to initialization"

modified to:

var tr$ = $('<tr>');
if(!('draggable' in document.createElement('span'))) {
  //handle old browsers                
} else {
  tr$.attr('draggable', 'true');
}

Posting in case it helps someone else to see it this way.

Answer 3

The meaning of your error is : $this.draggable('enable'); is called before $this.draggable();.

Check the execution flow of your progam : make sure that you have indeed initialized the plugin (e.g : called $this.draggable();) before trying to do anything with it.