jQuery Draggable mit dynamisch aufgebautem Selektor

Question

In meinem aktuellen Markup gibt es ein einzelnes <div>, das als Container für die Vorschau von Elementen dient, und ich möchte es mit jQuery UI ziehbar machen.

die Grundlagen aus dem Tutorial Folgen, da ich noch nie so etwas getan hat, es nur eine Frage der wäre:

$('#preview').draggable(); 

Und in der Tat, es war. Ich habe es hinzugefügt und es hat funktioniert.

Allerdings brauche ich einen etwas spezifischeren Selektor, damit andere Dinge, die den gleichen Vorschaucontainer teilen, auch nicht ziehbar werden.

So, während die Vorschau Bau habe ich ein class die Gruppe zu identifizieren, das heißt:

$('#preview').removeClass().addClass('group_1'); 

Und dann habe ich das gleiche mit der anderen Vorschau löst mit verschiedenen Saiten (dh group_2, group_3 ...)

Bei der Überprüfung des Vorschauelements in Chrome funktioniert es einwandfrei: Alle Klassen werden aus dem Element entfernt und das neue hinzugefügt.

denken, dass alles, was ich brauchte, war, änderte ich dann die jQuery UI Selector:

$('#preview.group_1').draggable(); 

Und es funktioniert nicht mehr.

Gibt es etwas Spezifisches, auf das ich achten sollte?

Answer 1

Sie haben nicht viel von einem Beispiel zur Verfügung gestellt. Es ist also schwer zu wissen, ob Sie danach suchen. Versuchen:

$("#preview[class^='group_']").draggable(); 

Diese ziehbar auf die ID von preview und Klasse wie group_1, group_2, group_n gelten. Siehe auch: http://api.jquery.com/attribute-starts-with-selector/

Noch einmal, ohne Beispielcode, es ist schwer zu wissen, welche Elemente das fängt. IDs sollten eindeutig sein. Zum Beispiel, Sie haben nur ein <div> verwendet:

<div id="preview" class="group_1"> 
</div> 

So ist es nicht klar, warum Sie die Klasse sind zu ändern.

Sie erwähnen, dass Sie andere Elemente haben, die dieses Elternteil teilen, sollte nicht ziehbar sein. Zum Beispiel:

<div id="preview"> 
    <div class="thumb"> 
     <img src="image_thumb.job"> 
    </div> 
    <div class="caption"> 
    </div> 
</div> 

Wenn Sie $("#preview").draggable() rufen, Dadurch wird der Behälter ziehbar machen, nicht die Einzelteile innerhalb; es sei denn, Sie haben "Vorschau" als ID für andere Elemente festgelegt, was nicht empfohlen wird.

aktualisieren

Betrachten wir eine Alternative, alle Klassen zu entfernen.

$("#preview").removeClass("group_1").addClass("group_2");

Dies würde die ui-draggable davor entfernt verhindern.Sie können auch mehr in der Tiefe mit Ihrem seeking sein:

$("#preview").removeClass(function(i, c) { 
    if (c.indexOf("group_") !== -1) { 
    var res = c.split(" "); 
    $.each(res, function(k, v){ 
     if(v.indexOf("group_") === 0){ 
     return v; 
     } 
    }); 
    } 
} 

Dies nur eine Klasse zu entfernen, die mit group_ beginnt oder es könnte angepasst werden, um andere Fälle zu passen. Oder entfernen Sie alle, aber:

$("#preview").removeClass(function(i, c) { 
    if (c.indexOf("ui-draggable") >= 0) { 
    var res = c.split(" "); 
    $.each(res, function(k, v){ 
     if(v.indexOf("ui-draggable") === -1){ 
     return v; 
     } 
    }); 
    } 
} 

Dies würde entfernen Sie alle Klassen mit Ausnahme ui-draggable. Sie können auch den Index i verwenden, um nur bestimmte Elemente in einer größeren Anzahl von Elementen zu betrachten. Ich hoffe, das hilft.