Come posso distruggere un jquery ridimensionabile senza distruggere i bambini ridimensionabili?

Question

Ho un elemento padre che è ridimensionabile (solo larghezza) - all'interno di questo div ho un numero di altri div che sono anche ridimensionabili (solo altezza).

A volte desidero disattivare o distruggere il ridimensionamento della larghezza genitore, ma lasciare il ridimensionamento dell'altezza interna in posizione.

Quando chiamo $("#idTopDiv").resizable("destroy");, questo distrugge anche i ridimensionabili su tutti i div figli.

Tipico schema è: -

<div id=idDivTop> <!-- Resizable width --> 
    <div id=idInnerOne> 
    </div> 

    <div id=idInnerTwo> <!-- Resizable height --> 
    <div> 
</div> 

Apprezzate tutte le idee.

Answer 1

Penso che ciò accada perché il distruggi di ridimensionabile rimuove tutti i manipoli di ridimensionamento all'interno dell'elemento ui, che capita di includere i manici di ridimensionamento per i resizabili interni. Quindi i resizable interni non vengono effettivamente distrutti, sono solo incasinati.

È possibile visualizzare il codice sorgente Ridimensionabile here; sta accadendo alla riga 199 dove dice .find('.ui-resizable-handle').remove();.

Per risolvere questo problema è necessario chiamare anche il metodo destroy sui ridimensionabili interni e quindi ricrearli. (jsfiddle)

$("div").resizable(); 

// Destroy all three resizables 
$("div").resizable("destroy"); 

// Recreate the inner resizables 
$("#idInnerOne, #idInnerTwo").resizable(); 

Hai bisogno di fare che per rimuovere attacchi e dati che imposta ridimensionabili fino al momento della creazione, altrimenti penserà la sua già creato quando si tenta ricreare e non farà nulla.

Si potrebbe anche considerare di disabilitare l'esterno ridimensionabile invece di distruggerlo, ma quello has its own issues.