jquery-ui – jQuery UI可排序 – 错误:在初始化之前无法调用sortable上的方法;试图调用方法’禁用’

前端之家收集整理的这篇文章主要介绍了jquery-ui – jQuery UI可排序 – 错误:在初始化之前无法调用sortable上的方法;试图调用方法’禁用’前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个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);
  }
}

猜你在找的jQuery相关文章