12

Ajax リクエストから動的に入力される jQuery UI Sortable リスト要素があります。

現在、ワークフローは

  1. ユーザーがボタンをクリックすると、リストが入力され、指定された設定で並べ替えられます。
  2. ユーザーが別のボタンをクリックし、
    1. 既存のリスト<li>要素はjQuery.empty()呼び出しによって消去されます
    2. <li>新しいデータ値が新しいリスト要素に挿入され、<ul>リストに追加されます
    3. ソート可能なリストは $("#sortable").sortable("refresh"); によって更新されます。

Sortable list object が与えられた場合$("#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 プロパティを使用します。sortable を初期化するときはいつでも、このオプションを追加してください。

$("#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 に答える