web-dev-qa-db-ja.com

jQuery UIの並べ替え可能-エラー：初期化の前に並べ替え可能なメソッドを呼び出すことはできません。メソッド「disable」を呼び出そうとしました

Ajaxリクエストから動的に入力されるjQueryUIの並べ替え可能なリスト要素があります。

現在、ワークフローは進行中です

  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オブジェクトを初期化できないのですか？

jquery-uijquery-ui-sortable
9
Jason

任意の要素で.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);
  }
}
9
Mandeep Jain