jQuery UI Sortable - Error: cannot call methods on sortable prior to initialization; attempted to call method 'disable'

Question

I have a jQuery UI Sortable list element that is populated dynamically from an Ajax request.

Currently, the workflow goes

1. User clicks button, list is

Answer 1

Calling a .sortable() on any element makes the children of that elements sortable. That does not mean that the children are also initialized with the .sortable(). They are just a part of a sortable container which can be dragged around.

And since you are calling .sortable('disable') on the child elements, it will give an error since the .sortable() was called on the parent and not the children. And the way you are disabling is also incorrect.

Make use of the cancel property to exclude those elements from being sorted. Add this option wherever you are initializing your sortable.

$("#avail_list").sortable({ 
    cancel: ".disable-sort" 
});

And add that class to those elements that you want to disable.

function disableDraggable(elements){
  for (var i = 0; i < elements.length; i++) {
    $("#" + elements[i]).addClass("disable-sort");
    $("#" + elements[i]).fadeTo("fast", 0.5);
  }
}