I have a jQuery UI Sortable list element that is populated dynamically from an Ajax request.
Currently, the workflow goes
<li>
elements are erased by jQuery.empty()
call<li>
list elements and appended to <ul>
listGiven 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?
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);
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With