Observe this fiddle to see the demonstration: DEMO
If you are interested in the resizing of white divs, check out this link: Resizing of White divs
The draggable divs are represented by red while the static divs are shown in white and located in droppable fields.
The goal is to enable both draggable (red) and static (white) divs to resize simultaneously. However, I am encountering issues with achieving this functionality.
I have commented out the code responsible for resizing both the red (draggable) and static (white) fields within the document ready function. The problem lies in the fact that they do not work concurrently. Any assistance in resolving this issue would be greatly appreciated.
Jquery Code:
$(function () {
// Responsible for resizing the draggable elements (red)
$('.resize_box').resizable({ handles: 'e' });
// Responsible for resizing the static elements (white)
$('.resize_box').resizable({
handles: { 'e': '.ui-resizable-e' }
});
$(".selectorField").draggable({
helper: "clone",
stack: "div",
cursor: "pointer",
cancel: null
});
function makeDraggable($sel) {
$sel.find('.resize_box').resizable({
handles: { 'e': '.ui-resizable-e' }
});
}
$(".droppedFields").droppable({
accept: ":not(.ui-sortable-helper)",
drop: function (event, ui) {
var draggable = ui.draggable;
draggable = draggable.clone();
draggable.addClass('hers');
makeDraggable(draggable); //NEW
draggable.appendTo(this);
$(ui.draggable).hide();
alert("drop");
$(".droppedFields").sortable({
cancel: null,
connectWith: ".droppedFields"
}).disableSelection();
}
});
});