Question

我有一个jQuery UI Sortable列表元素，它是从Ajax请求动态填充的。

目前，工作流程

用户点击按钮，列表已填充并按指定设置排序。
用户点击另一个按钮，
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对象？

Answer 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);
  }
}

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

1 个答案: