Resizable, sortable, and selector...
Hi all. I am new to JQuery, tho have years of PHP/Javascript experience. I've been meaning to have a play with JQuery and UI for a while now, and eventually have a chance to do it! Anyways, I want to build a dynamic table using divs, and then save this. I want the end user to be able to add divs, and resize them... JQuery UI should allow me to do this... Now I have the following code:
function initialiseJQuery() {
$("#blockTemplate").draggable({
helper: 'clone',
opacity: 0.7
});
$("#layoutContainer").droppable({
drop: function(event,ui) {
$(this).removeClass('border-higlight');
var objDiv = null;
var objDiv = $("#divToClone").clone();
$(objDiv).css('display', 'block');
$(objDiv).width((600/intColumns) - 20);
$(objDiv).resizable({
grid: [180,100],
containment: '#layoutContainer',
minHeight: 50,
minWidth: 180
});
$(this).append(objDiv);
},
over: function(event,ui) {$(this).addClass('border-higlight')},
out: function(event,ui) {$(this).removeClass('border-higlight')}
}
);
}
This basically clones a hidden div that is added to a container, and then makes the new div resizable... When you add the first element it works fine, but when you add a second or subsequent div to the conatiner, the new divs cannot be resized... Can someone help with this? I thought I might be able to remove the resiazble functionality from all the divs, but is there a selector I can use to find all the divs that are resizable? Such as: $('#layoutContainer div :resizable').resizable.destroy(); or something?
Any help or suggestions would be great...
Martin