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

问题:

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 populated and sorted by specified settings.
2. User clicks another button,
   1. Existing list <li> elements are erased by jQuery.empty() call
   2. New data values are inserted into new <li> list elements and appended to <ul> list
   3. Sortable list is refreshed via $("#sortable").sortable("refresh");

Given a Sortable list object $("#avail_list").sortable( ... );, I want to have specific list elements' draggable property disabled and opacity set to 0.5 based on existing values in other elements.

To do this, I have the following function:

var disabled = []; var appendString = "" if (avail.length > 0) {   for (var i = 0; i < avail.length; i++) {      //check if current list element exists in existing value list. True results     //in grayed out and non-draggable element     compareMatch = checkMatch(avail[i], compare);      if (compareMatch)       disabled.push(list + "open_" + avail[i].id);       appendString += "<li id = "+ list + "open_" + avail[i].id +        " class = 'avail_list_element'><img class = 'logo' src = /static/images/vendor_logo/" + avail[i].icon + " /></li>"   }    $("#avail_list").append(appendString);  }   $("#avail_list").sortable("refresh");     if (disabled.length > 0)     disableDraggable(disabled);  function disableDraggable(elements){   for (var i = 0; i < elements.length; i++) {     console.log(elements[i])     $("#" + elements[i]).sortable("disable");     $("#" + elements[i]).fadeTo("fast", 0.5);   } } 

However, this results in an error

Error: cannot call methods on sortable prior to initialization;  attempted to call method 'disable' 

Since I called refresh on the sortable list prior to disabling the elements, how can the sortable object not be initialized?

回答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);   } } 

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