jQuery UI Sortable - Fehler: Methoden können vor der Initialisierung nicht sortiert aufgerufen werden; versucht, die Methode 'disable' aufzurufen

Question

Ich habe eine jQuery UI Sortierbare Liste Element, das dynamisch von einer Ajax-Anfrage gefüllt wird.

Derzeit ist die Workflow

1. Benutzer Schaltfläche klickt geht, Liste wird von bestimmten Einstellungen bevölkert und sortiert.
2. Benutzer eine andere Taste klickt, werden
   1. Vorhandene Liste <li> Elemente von jQuery.empty() Anruf gelöscht
   2. Neue Datenwerte werden in neue <li> Listenelemente eingefügt und
   3. sortierbare Liste zu <ul> Liste angehängt wird über $ aktualisiert (“ #sortable "). sortierbar (" refresh ");

Gegeben eine sortierbare Liste Objekt $("#avail_list").sortable(...);, möchte ich die spezifischen Listenelemente haben draggable Eigenschaft deaktiviert und Opazität auf 0,5 basierend auf vorhandenen Werte in anderen Elementen.

Um dies zu tun, ich habe die folgende Funktion:

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

Dies führt jedoch zu einem Fehler

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

Da ich refresh auf der sortierbare Liste aufgerufen, bevor die Elemente zu deaktivieren, wie Kann das Objekt sortable nicht initialisiert werden?

Answer 1

Wenn Sie ein .sortable() für ein beliebiges Element aufrufen, werden die untergeordneten Elemente dieser Elemente sortierbar. Das bedeutet nicht, dass die Kinder auch mit dem .sortable() initialisiert werden. Sie sind nur ein Teil eines sortierbaren Containers, der herumgeschleppt werden kann.

Und da Sie .sortable ('disable') auf den untergeordneten Elementen aufrufen, wird es einen Fehler geben, da die .sortable() für das übergeordnete Element und nicht für die untergeordneten Elemente aufgerufen wurde. Und die Art und Weise, wie Sie die Funktion deaktivieren, ist ebenfalls falsch.

Verwenden Sie die cancel property, um auszuschließen, dass diese Elemente sortiert werden. Fügen Sie diese Option überall dort hinzu, wo Sie Ihre Sortierung initialisieren.

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

Und fügen Sie diese Klasse den Elementen hinzu, die Sie deaktivieren möchten.

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