我有一个jQuery UI可排序列表元素,它是从Ajax请求动态填充的.
目前,工作流程正在进行
>用户单击按钮,列表将填充并按指定的设置排序.
>用户点击另一个按钮,
>现有清单< li>元素被jQuery.empty()调用擦除
>将新数据值插入新的< li>列出元素并附加到< ul>名单
>可排序列表通过$(“#sortable”)刷新.sortableable(“refresh”);
给定一个Sortable列表对象$(“#avail_list”).sortable(…);,我希望禁用特定列表元素的draggable属性,并根据其他元素中的现有值将opacity设置为0.5.
为此,我有以下功能：
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);
}
}
但是,这会导致错误
Error: cannot call methods on sortable prior to initialization; attempted to call method 'disable'
由于我在禁用元素之前调用了可排序列表上的刷新,如何不对可排序对象进行初始化？
解决方法
在任何元素上调用.sortable()会使该元素的子元素可以排序.这并不意味着孩子们也用.sortable()初始化.它们只是可以被拖动的可分类容器的一部分.
因为你在子元素上调用.sortable(‘disable’),所以它会给出一个错误,因为.sortable()是在父元素而不是子元素上调用的.你禁用的方式也是不正确的.
利用cancel property排除这些元素的排序.在初始化可排序的任何位置添加此选项.
$("#avail_list").sortable({
cancel: ".disable-sort"
});
并将该类添加到要禁用的元素.
function disableDraggable(elements){
for (var i = 0; i < elements.length; i++) {
$("#" + elements[i]).addClass("disable-sort");
$("#" + elements[i]).fadeto("fast",0.5);
}
}