I have a div (canvas), that acts as a droppable for rects. Rects, that were dropped on the div, are cloned and can be dragged and resized within that div.
My questions is: How can I (re)store the position, size of the dynamically cloned elements?
How it works: drag more than one rect onto the canvas resize or drag it within the rect click save
By now, it gives me the correct number of cloned rects, but it saves only the position and size of the last cloned element.
How can I add the hidden textfields for each cloned rect separately?
$(function() {
$('#rect').draggable({
revert: "invalid",
helper: function(event, ui) {
return $(this).clone(true);
}
});
$('#bu').click(function() {
alert("no of rect set: " + $('.rectset').length);
$('.rectset').each(function() {
var posTop = $('input#posTop').val();
var posLeft = $('input#posLeft').val();
var height = $('input#sizeHeight').val();
var width = $('input#sizeWidth').val();
alert("left: " + posLeft + ", top: " + posTop +
" ,height: " + height + ", width: " + width);
});
});
$("#canvas").droppable({
accept: "#rect",
drop: function(e, ui) {
if ($(ui.draggable).hasClass('ui-draggable-dragging')) {
/*alert("rect is dragged and not copied again");*/
return
}
var droppedRect = $(ui.draggable).clone().addClass('rectset')
droppedRect.append('<input type="hidden" id="posLeft" value="empty"></input>');
droppedRect.append('<input type="hidden" id="posTop" value="empty"></input>');
droppedRect.append('<input type="hidden" id="sizeWidth" value="empty"></input>');
droppedRect.append('<input type="hidden" id="sizeHeight" value="empty"></input>');
droppedRect.appendTo(this);
droppedRect.draggable({
containment: "#canvas",
scroll: false,
stop: function(event, ui) {
// alert($('input#posLeft').val() + " " + $('input#posTop').val()) ;
var posleft = ui.position.left;
var postop = ui.position.top;
$('input#posLeft').attr('value', posleft);
$('input#posTop').attr('value', postop);
alert($('input#posLeft').val() + " " + $('input#posTop').val());
}
}).resizable({
ghost: true,
containment: "#canvas",
stop: function(event, ui) {
$('#size').attr('value', ui.size)
var width = ui.size.width;
var height = ui.size.height;
// alert($('input#sizeWidth').val() + " " + $('input#sizeHeight').val()) ;
$('input#sizeWidth').attr('value', width);
$('input#sizeHeight').attr('value', height);
alert($('input#sizeWidth').val() + " " + $('input#sizeHeight').val());
}
});
}
});
});#canvas {
width: 700px;
height: 400px;
border: 10px solid black;
padding: 15px 15px 15px 150px;
}
#rect {
border: 3px solid black;
background: #ffff99;
width: 100px;
height: 100px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
<button id="bu" onclick="save()">Save</button >
<div id="rect" class="ui-widget-content"> </div>
<div id="canvas" class="ui-widget-header">Like Mike said, the IDs need to be unique. I solved this by adding a counter var i = 0, then on each new droppedRect setting the id attribute to the number incremented. Also, I think a better way to achieve the same goal of putting data onto the rectangles is through jQuery.data. I used jQueryUI 1.9 because that was being used in the fiddle.
$(function() {
$('#rect').draggable({
revert: "invalid",
helper: function(event, ui) {
return $(this).clone(true);
}
});
var i = 0;
$('#bu').click(function() {
console.log("no of rect set: " + $('.rectset').length);
$('.rectset').each(function(a, b) {
console.log("left: " + $(b).data('posleft') + ", top: " + $(b).data('postop') +
" ,height: " + $(b).data('height') + ", width: " + $(b).data('width'))
});
});
$("#canvas").droppable({
accept: "#rect",
drop: function(e, ui) {
if ($(ui.draggable).hasClass('ui-draggable-dragging')) {
return;
}
var droppedRect = $(ui.draggable).clone().addClass('rectset').attr('id', i++)
.appendTo(this)
.data({
'posleft': ui.position.left,
'postop': ui.position.top,
'width': ui.draggable[0].offsetWidth,
'height': ui.draggable[0].offsetHeight
});
console.log("Dropped - left: " + ui.position.left + " top:" + ui.position.top + " width: " + ui.draggable[0].offsetWidth + " height: " + ui.draggable[0].offsetHeight);
droppedRect.draggable({
containment: "#canvas",
scroll: false,
stop: function(event, ui) {
$(this).data('posleft', ui.position.left);
$(this).data('postop', ui.position.top);
console.log("Moved - left: " + ui.position.left + " top:" + ui.position.top);
}
}).resizable({
ghost: true,
containment: "#canvas",
stop: function(event, ui) {
$(this).data('width', ui.size.width);
$(this).data('height', ui.size.height);
console.log("Resized - width: " + ui.size.width + " height: " + ui.size.height);
}
});
}
});
});#canvas {
width: 700px;
height: 400px;
border: 10px solid black;
padding: 15px 15px 15px 150px;
}
.rect {
border: 3px solid black;
background: #ffff99!important;
width: 100px;
height: 100px;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
<button id="bu">Save</button >
<div id="rect" class="rect ui-widget-content"> </div>
<div id="canvas" class="ui-widget-header">