jQuery UI Sortable-错误:初始化前无法在sortable上调用方法；试图调用方法“禁用"

问题描述

我有一个jQuery UI Sortable列表元素，该元素是根据Ajax请求动态填充的.

I have a jQuery UI Sortable list element that is populated dynamically from an Ajax request.

目前，工作流程已经完成

Currently, the workflow goes

1. 用户单击按钮，列表将根据指定的设置进行填充和排序.
2. 用户单击另一个按钮，

1. User clicks button, list is populated and sorted by specified settings.
2. User clicks another button,

1. 通过jQuery.empty()调用删除现有列表<li>元素
2. 将新数据值插入到新的<li>列表元素中，并附加到<ul>列表
3. 可排序列表通过$(#sortable").sortable("refresh");
刷新

1. Existing list <li> elements are erased by jQuery.empty() call
2. New data values are inserted into new <li> list elements and appended to <ul> list
3. Sortable list is refreshed via $("#sortable").sortable("refresh");

鉴于可排序列表对象$("#avail_list").sortable( ... );，我想禁用特定列表元素的draggable属性，并根据其他元素中的现有值将不透明度设置为0.5.

Given a Sortable list object $("#avail_list").sortable( ... );, I want to have specific list elements' draggable property disabled and opacity set to 0.5 based on existing values in other elements.

为此，我具有以下功能:

To do this, I have the following function:

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对象?

Since I called refresh on the sortable list prior to disabling the elements, how can the sortable object not be initialized?

推荐答案

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

Calling a .sortable() on any element makes the children of that elements sortable. That does not mean that the children are also initialized with the .sortable(). They are just a part of a sortable container which can be dragged around.

并且由于您正在子元素上调用.sortable('disable')，由于.sortable()是在父元素而不是子元素上调用的，因此会产生错误.而且您禁用的方式也不正确.

And since you are calling .sortable('disable') on the child elements, it will give an error since the .sortable() was called on the parent and not the children. And the way you are disabling is also incorrect.

利用取消属性来排除这些元素.无论您要初始化可排序项，都请添加此选项.

Make use of the cancel property to exclude those elements from being sorted. Add this option wherever you are initializing your sortable.

$("#avail_list").sortable({ 
    cancel: ".disable-sort" 
});

并将该类添加到要禁用的元素中.

And add that class to those elements that you want to disable.

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上调用方法；试图调用方法“禁用"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！