12

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

目前，工作流程进行

  1. 用户单击按钮，列表被填充并按指定设置排序。
  2. 用户点击另一个按钮，
    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不初始化对象呢？

4

1 回答 1

10

在任何元素上调用 .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);
  }
}
于 2013-08-19T05:36:49.553 回答