2011-11-10 12 views
14

L'interazione jQuery dell'interfaccia trascinabile ha una proprietà piacevole per setting the containment come genitore.Interfaccia utente jQuery come impostare l'opzione di contenimento trascinabile sul genitore del genitore

$(".selector").draggable({ containment: 'parent' }); 

Desidero impostare il contenimento come genitore del genitore. Non v'è alcun valore stringa per raggiungere questo obiettivo, come stringa le opzioni sono

'genitore', 'documenti', 'finestra', [x1, y1, x2, y2]

ho potuto calcolare x1, y1, x2, y2 del genitore del genitore al caricamento della pagina e usano questi valori per impostare i limiti per un contenitore relativo al documento. Ma la posizione del contenitore può cambiare rispetto alla posizione padre del genitore se la finestra viene ridimensionata dopo il caricamento della pagina. L'opzione "genitore" nativo mantiene l'elemento trascinabile all'interno dell'elemento padre indipendentemente dal ridimensionamento della finestra.

C'è un modo per realizzare questo contenimento trascinabile utilizzando il genitore del genitore? .

risposta

20

Come per lo documentation, l'opzione containment può anche essere un selettore jQuery o un elemento reale. Così si può fare questo:

$('.selector').draggable({ 
    containment: $('.selector').parent().parent() 
}); 

O meglio ancora:

$('.selector').each(function(){ 
    $(this).draggable({ 
     containment: $(this).parent().parent() 
    }); 
}); 
+0

ho cercato di fare questo per un tavolo ordinabile, ma $ (this) .parent() genitore() non ha funzionato.. Qualche altro suggerimento? I miei TRs all'interno del mio corpo sono ordinabili e vorrei limitarli all'interno dell'intero tavolo. –

3

Secondo la documentazione, non è devono passaggio in una stringa per la proprietà containment. È possibile passare in qualsiasi:

Selector, Element, String, Array 

Quindi, basta selezionare padre del genitore con jQuery (vale a dire $(".selector").parent().parent()), e passare invece di 'parent'.

0

Questo funziona bene così:

$('.selector').draggable({ 
    containment: "#parent", 
    scroll: false 
}); 
Problemi correlati