¿Cómo destruyo un jquery de tamaño variable sin destruir los elementos resizables?

Question

Tengo un div principal que se puede cambiar de tamaño (solo ancho) - dentro de este div tengo un número de otros divs que también se pueden cambiar de tamaño (solo en altura).

En ocasiones deseo deshabilitar o destruir el cambio de tamaño del ancho principal pero dejar el ajuste de tamaño de la altura interna en su lugar.

Cuando llamo al $("#idTopDiv").resizable("destroy");, esto destruye los resizables en todos los divs secundarios también.

diseño típico es: -

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

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

Apreciar cualquier idea.

Answer 1

Creo que esto sucede porque la destrucción de tamaño variable elimina todos los archivos de tamaño dentro del elemento ui, que pasa a incluir los controladores de cambio de tamaño para los resizables internos. Por lo tanto, los resizables internos no se están destruyendo realmente, solo se están arruinando.

Puede ver el código fuente Resimensionable here; está sucediendo en la línea 199 donde dice .find('.ui-resizable-handle').remove();.

Para arreglar esto, necesita llamar al método de destrucción en los resizables internos también y luego volver a crearlos. (jsfiddle)

$("div").resizable(); 

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

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

que tiene que hacer que para eliminar enlaces y conjuntos de datos de tamaño variable que subir sobre la creación, de lo contrario, se piensa que su ya creados cuando intenta volver a crearlo y no hará nada.

También podría considerar desactivar el redimensionamiento externo en lugar de destruirlo, pero que has its own issues.