jQuery UI Sortable - 错误:在初始化之前无法调用sortable上的方法; 试图调用方法'禁用'

Question

我有一个jQuery UI可排序列表元素,它是从Ajax请求动态填充的.

目前,工作流程正在进行

1. 用户单击按钮,列表将填充并按指定的设置排序.
2. 用户点击另一个按钮,
   1. <li>通过jQuery.empty()调用擦除现有列表元素
   2. 新数据值将插入新的<li>列表元素并附加到<ul>列表中
   3. 可排序列表通过$("#sortable")刷新.sortableable("refresh");

给定可排序列表对象$("#avail_list").sortable( ... );,我希望draggable禁用特定列表元素的属性,并根据其他元素中的现有值将不透明度设置为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'

由于我refresh在禁用元素之前调用了可排序列表,如何才能sortable初始化对象？

Answer 1

在任何元素上调用.sortable()会使该元素的子元素可以排序.这并不意味着孩子们也用.sortable()初始化.它们只是可以被拖动的可分类容器的一部分.

因为你在子元素上调用.sortable('disable'),所以它会给出一个错误,因为.sortable()是在父元素而不是子元素上调用的.你禁用的方式也是不正确的.

使用cancel属性将这些元素排除在排序之外.在初始化可排序的任何位置添加此选项.

$("#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);
  }
}