0
J'ai un div (canvas), qui agit comme une droppable pour les rects. Les rects, qui ont été déposés sur la div, sont clonés et peuvent être déplacés et redimensionnés dans cette div.(re) stocker la position et la taille de CHAQUE dragable dragable JQuery
Mes questions sont: Comment puis-je (re) stocker la position, la taille des éléments dynamiquement clonés?
Comment ça marche: glisser plus d'un rect sur la toile Redimensionner ou faites-le glisser dans le rect cliquez sur Enregistrer
Maintenant, il me donne le nombre exact de rects clonés, mais il enregistre uniquement les position et taille du dernier élément cloné.
Comment puis-je ajouter les champs de texte cachés pour chaque rect clone séparément?
$(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">
doivent être uniques au document, de sorte que ça ne va pas travailler si vous avez plus d'un. La valeur d'une zone de texte doit être définie avec '.val (value)', pas 'attr'. Aussi, partagez un [mcve] avec le minimum de code pour montrer votre problème. ** Ne gardez pas le code sur un site externe **. De nombreuses personnes sont bloquées sur les sites de partage de code, ce qui limite le nombre de personnes susceptibles de vous aider. Stack Overflow a Stack Snippets qui fournissent un niveau de fonctionnalité très similaire à jsfiddle.net. –