jQuery UI Sortable - 错误：无法在初始化之前调用可排序的方法；试图调用方法“禁用”答案

【问题标题】：jQuery UI Sortable - Error: cannot call methods on sortable prior to initialization; attempted to call method 'disable'jQuery UI Sortable - 错误：无法在初始化之前调用可排序的方法；试图调用方法“禁用”
【发布时间】：2013-08-20 17:54:50
【问题描述】：

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

目前，工作流程进行

用户点击按钮，列表被填充并按指定设置排序。
用户单击另一个按钮，
1. 现有列表<li> 元素被jQuery.empty() 调用删除
2. 新数据值被插入到新的<li> 列表元素中并附加到<ul> 列表中
3. 可排序列表通过 $("#sortable").sortable("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对象怎么可能不被初始化呢？

【问题讨论】：

您在 $("#avail_list") 上调用 sortable ，但是您的元素数组将包含类似 $("#listopen_1") 的内容，尽管我不确定，因为我不知道 list 变量设置为什么。也许在尝试禁用之前尝试添加$("#" + elements[i]).sortable("refresh");？

标签： jquery-ui jquery-ui-sortable

【解决方案1】：

在任何元素上调用 .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);
  }
}

【讨论】：