(Re)存储每个克隆的可拖动JQuery的位置和大小
(Re)存储每个克隆的可拖动JQuery的位置和大小
提问于 2017-07-28 22:23:45
我有一个div (画布)，作为rects的droppable。放置在div上的Rect将被克隆，并且可以在该div中拖动和调整大小。
我的问题是:如何(重新)存储动态克隆元素的位置和大小？
工作原理:将多个矩形拖到画布上调整大小或在矩形内拖动，单击保存
到目前为止，它给出了克隆的矩形的正确数量，但它只保存了最后一个克隆元素的位置和大小。
如何分别为每个克隆的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) {
// 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">
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-07-28 23:17:15
就像Mike说的，ID必须是唯一的。我解决这个问题的方法是添加一个计数器var i = 0，然后在每个新的droppedRect上将id属性设置为递增的数字。此外，我认为要实现将数据放到矩形上的相同目标，更好的方法是通过jQuery.data。我使用jQueryUI 1.9，因为它在小提琴中被使用了。
$(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">
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45375913
复制相关文章
相似问题
腾讯云开发者
