jQuery UI Sortable - Błąd: nie można wywołać metod sortable przed inicjalizacją; próbował wywołać metodę "disable"

Question

Mam element listy do sortowania jQuery UI, który jest dynamicznie wypełniany z żądania Ajax.

Obecnie workflow idzie

1. Użytkownik kliknie przycisk, lista jest pusta i klasyfikowane według określonych ustawień.
2. Użytkownik klika inny przycisk,
   1. istniejącej listy <li> elementy są usuwane przez jQuery.empty() rozmowy
   2. Nowe wartości danych są wstawiane do nowych <li> lista elementów i dołączane do <ul> listy
   3. Sortable lista jest odświeżana poprzez $ (” #sortable "). sortable (" refresh ");

Biorąc pod uwagę Sortable lista obiektów $("#avail_list").sortable(...);, chcę mieć draggable nieruchomość Poszczególne elementy listy wyłączone i ustawić krycie do 0,5 na podstawie istniejących wartości w innych elementach.

Aby to zrobić, mam następujące funkcje:

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

Jednak to powoduje błąd

Error: cannot call methods on sortable prior to initialization; 
attempted to call method 'disable' 

Odkąd zwanego refresh na liście sortable przed wyłączanie elementów, jak czy obiekt sortable nie może zostać zainicjowany?

Answer 1

Wywołanie .sasable() na dowolnym elemencie powoduje, że dzieci z tych elementów można sortować. Nie oznacza to, że dzieci są również inicjalizowane przy użyciu .sortable(). Są tylko częścią sortowalnego pojemnika, który można przeciągnąć.

A ponieważ wywołujesz funkcję .sable ("disable") na elementach potomnych, spowoduje to błąd, ponieważ funkcja .systemable() została wywołana w elemencie parent, a nie w elemencie children. A sposób, w jaki się wyłączasz, jest również niepoprawny.

Użyj cancel property, aby wykluczyć sortowanie tych elementów. Dodaj tę opcję, gdy uruchamiasz sortable.

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

I dodaj tę klasę do elementów, które chcesz wyłączyć.

function disableDraggable(elements){ 
    for (var i = 0; i < elements.length; i++) { 
    $("#" + elements[i]).addClass("disable-sort"); 
    $("#" + elements[i]).fadeTo("fast", 0.5); 
    } 
}