Draggable & Resizable

Draggable & Resizable


Hi all,
I'm very new with jQuery and jQuery UI. What I need to do is to have
many "divs" with Draggable and Resizable behaviours, but when I drag
some div, the resizable behaviour disapears.
This is how I try to do it:
I've an empty div <div id="editZones"></div>, and I dinamically create
divs inside it by clicking on a button: <input type="button"
id="add_zone_button" value="Agregar zona" />
This is the code that handles the button click and create the
Draggable and Resizable divs inside the "editZones" div:
$(document).ready( function() {
$("#add_zone_button").click( function() {
//alert("add zone button click");
zoneCount++;
newZoneId = "zone_"+zoneCount;
// Agrega una nueva div de zone a la div con id
"editZones".
$("#editZones").append('<div class="newZone"
id="'+newZoneId+'">zxcvzxcv</div>');
// La nueva zona es dragable con estos parametros:
// http://projects.sevir.org/storage/jQueryD&DSample/d&dsample2.html
$("#"+newZoneId).draggable(
{
zIndex: 1000,
containment: 'parent',
revert: false,
opacity: 0.7,
cursor: 'hand',
snap: true,
snapMode: 'both',
snapTolerance: 10,
stop: function(evn, ui) {
evn.target.innerHTML = "X:
"+evn.target.style.top+" Y: "+evn.target.style.left;
}
}
);
// La nueva zona tambien es resizable:
// http://docs.jquery.com/UI/Resizable
$("#"+newZoneId).resizable(
{
start: function(evn, ui) {
     //alert("resize start " + evn.target.offsetWidth
+ " " + ui); // OK
}
}
);
} ); // add_zone_button
} );
Again, the problem is that when I drag one of the dinamically created
divs, it loses the Resizable behaviour.
Thank you!
Cheers,
Pablo Pazos Gutierrez
http://groups.google.com/group/yuppframeworkphp