0
我有一個div（canvas），它充當rects的droppable。被放在div上的Rects被克隆，並且可以在該div內被拖動和調整大小。（重新）存儲每個克隆可拖動的位置和大小JQuery
我的問題是：我如何（重新）存儲位置，動態克隆元素的大小？
它是如何工作的： 拖動多個矩形到畫布上 調整大小或矩形 點擊保存
內拖動它到現在爲止，它給了我克隆rects的正確數目，但它只是節省了最後一個克隆元素的位置和大小。
如何分別爲每個克隆的rect添加隱藏文本框？
$(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) {
// \t 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">
ID必須是唯一的文件，所以這不會，如果你有一個以上的工作。文本框的值應該用'.val（value）'而不是'attr'來設置。另外，請用最少量的代碼分享[mcve]以顯示您的問題。 **不要將代碼保存在外部網站**上。許多人被禁止訪問代碼共享網站，因此您限制了可以幫助您的人數。堆棧溢出具有堆棧片段，它提供了與jsfiddle.net非常相似的功能級別。 –