I am facing a similar issue as described in this question and this one
I am trying to implement drag-and-drop and resize functionality. It is working fine for static elements, but I encounter issues when adding dynamic divs. The resize property works properly, but the droppable functionality does not work. Despite spending a lot of time researching and applying solutions, I have had no success.
You can find an example on JSFiddle
How can I resolve this problem?
Here is the code snippet:
CSS
#Section1 > div {
display: table-cell;
/*width: 1%;*/
border-right: 1px dotted red;
text-align: center;
}
HTML
<input type="button" class="Mybutton" value=" Add div" />
<br />
<div class="selectorField" style="height: 100px; width: 100px; background-color: green;"></div>
<div id="Section1" style="height: 100px; line-height: 20px; width: 100%; border: 1px dotted red; display: table;">
<div class="well droppedFields ui-sortable Resizable" style="width:73px;"></div>
</div>
JQUERY
function makeDraggable() {
$(".selectorField").draggable({
containment: $('body'),
helper: "clone",
stack: "div",
cursor: "move",
cancel: null
});
}
$(function () {
var _ctrl_index = 1001;
$(".Resizable").resizable({ handles: 'e' });
makeDraggable();
$(".droppedFields").droppable({
accept: ":not(.ui-sortable-helper)",
drop: function (event, ui) {
var draggable = ui.draggable;
draggable = draggable.clone();
draggable.appendTo(this);
makeDraggable();
}
});
var count = 0;
$('.Mybutton').click(function () {
count++;
if (count < 5) {
var a = $("<div class='well droppedFields ui-sortable Resizable'></div>").appendTo("#Section1");
a.droppable();
a.resizable({ handles: 'e' });
} else {
alert('No more divs to add');
}
});
});
I appreciate any assistance with resolving this issue.