Hola yo también tengo un problema con un treeview, y es que creo nuevos elementos(ul, li tags) con drag and drop dentro de unos contenedores (figure tags) y estos nuevos elementos los debo representar en un treeview conforme se vallan creando, el arbol se crea a partir de la etiqueta #tree1, la cual contiene datos de ejemplo por ahora y los elemento que se van creando se crean dentro de #row (se crean las tags figure que son los contenedores drag and drop y dentro de esta se encuentra un ul donde se insertan y se crean los objetos li)
<body>
<!-- BEGINS: TopView MainBlock -->
<div class="ui-layout-north">
<div class="ui-layout-content ui-widget-content ui-corner-bottom">
<img src="./images/Logo.png" height="46"/>
</div>
</div>
<!-- ENDS: TopView MainBlock -->
<!-- BEGINS: WorkAreaView Main Block -->
<div class="ui-layout-center">
<ul>
<li><a href="#tabs-center-1">Model Composer</a></li>
<li><a href="#tabs-center-2">Set Data Sources</a></li>
<button id="button-expand-workArea">Zoom</button>
</ul>
<div id="work-area-wrapper" class="ui-layout-content ui-widget-content ui-corner-bottom">
<!-- DIALOGS --->
<div id="dialog-full-workArea" title="Model Composer"></div>
<div id="tabs-wrapper">
<div id="true-content-workArea">
<div id="tabs-center-1" style="height: 100%;">
<!--<div id="work-area-bar" class="control-bar">Control Bar</div>-->
<section class="examples" style="height: 100%;">
<div id="row" class="row">
</div>
<div id="add_area">
<span id="plus" class="btnplus"></span>
</div>
</section>
</div>
<div id="tabs-center-2">
<p>
<br/><br/>
<b>TODO:</b><br/>
<ul>
<li>Let's create a panel where to set the data source.</li>
<li>Let's create the module to generate the XML Model Structure</li>
</ul>
<button id="button-see-json">See JSON</button>
<div id="json-obj">
</div>
</p>
</div>
</div>
</div>
</div>
</div>
<!-- ENDS: WorkAreaView MainBlock -->
<!-- BEGINS: SupportView MainBlock -->
<div class="ui-layout-west">
<ul>
<li style="width:38%"><a href="#tabs-west-1">Algorithms</a></li>
<li style="width:38%"><a href="#tabs-west-2">Model Tree</a></li>
</ul>
<div class="ui-layout-content ui-widget-content ui-corner-bottom">
<div id="tabs-west-1">
<figure class="algorithm_elements">
</figure>
</div>
<div id="tabs-west-2">
* * * * * * * * * *<ul id="tree1" class="tree">
<li >Layer 0 </li>
* * * * * * * * * * * *<li >Layer 1
* * * * * * * * * * * * * *<ul>
* * * * * * * * * * * * * * * *<li >A1</li>
* * * * * * * * * * * * * * * *<li >A3</li>
* * * * * * * * * * * * * * * *<li >M1</li>
* * * * * * * * * * * * * * * *<li >Selector</li>
* * * * * * * * * * * * * *</ul>
* * * * * * * * * * * *</li>
* * * * * * * * * * * *<li >Layer 2
* * * * * * * * * * * * * *<ul>
* * * * * * * * * * * * * * * *<li >M1</li>
* * * * * * * * * * * * * * * *<li >Selector</li>
* * * * * * * * * * * * * *</ul>
* * * * * * * * * * * *</li>
* * * * * * * * * * * *<li >Layer 3
* * * * * * * * * * * * * *<ul>
* * * * * * * * * * * * * * * *<li >A1</li>
* * * * * * * * * * * * * * * *<li >M3</li>
* * * * * * * * * * * * * *</ul>
* * * * * * * * * * * *</li>
* * * * * * * * * *</ul>
* * * * * * * *</div>
</div>
</div>
<!-- ENDS SupportView MainBlock -->
<!-- BEGINS: VarsView MainBlock -->
<div class="ui-layout-south ui-override">
<!-- Begins: VarsView -->
<div class="ui-layout-center">
<div class="ui-widget-header ui-corner-top">
<div id="table-header-title">Vars</div>
<button id="button-expand-table">Zoom</button>
<button class="button-add-icon"></button>
</div>
<div class="ui-layout-content ui-widget-content ui-corner-bottom">
<div id="dialog-full-table" title="Variables"></div>
<div id="true-content-table">
<div id="table-body">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="vars_table" style="width: 100%;">
<thead id="table-head-content">
<tr id="table-tr">
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody><!-- TABLE CONTENT TO BE FILLED BY JS --></tbody>
</table>
</div>
<div id="dialog-full-vars" title="Add/Edit Variables"></div>
<div id="true-content-vars" style="display:none;">
<label class="var-selector">Variable Name</label>
<input class="var-input" type="text" id="in-var-name" placeholder="type in a name" name="var-name"></input>
<label class="var-selector">Variable Type</label>
<select class="var-selector" name="var-type">
<option value="a">a</option>
<option value="o">o</option>
<option value="i">i</option>
</select>
<button id="button-add" class="control-button">Save & Add New</button>
<button id="button-check" class="control-button">Save & Close</button>
</div>
<div id="table-bottom-controls">
<button id="button-add-var">Add new variable</button>
</div>
</div>
</div>
</div>
<!-- Ends: VarsView -->
<!-- Begins: HelpView -->
<div class="ui-layout-west">
<ul>
<li style="width:30%"><a href="#tabs-west-info-1">Info</a></li>
<li style="width:30%"><a href="#tabs-west-info-2">Help</a></li>
<button id="button-hide-pan-west">collapse</button>
</ul>
<div class="ui-layout-content ui-widget-content ui-corner-bottom">
<div id="tabs-west-info-1">
<div id="info_area">
<div id="info_title_area">
<h3>Element Name</h3>
<h4>Type</h4>
</div>
<div id="info_image_area">
</div>
<div id="info_content_area">
<p>Lorem ipsum dolor amte sit in cumen dolor arus mau derotium. Aluram et maroni equalis mastos.</p>
</div>
</div>
</div>
<div id="tabs-west-info-2">
</div>
</div>
</div>
<!-- Ends: VarsView -->
</div>
<!-- ENDS: VarsView MainBlock -->
<script>
$(document).ready(function(){
$('.container').css('min-height', ($("#work-area-wrapper").height()-158));
});
$("#work-area-wrapper").resize(function(e){
$('.container').css('min-height', ($("#work-area-wrapper").height()-158));
});
</script>
</body>
</html>