（重新）存储每个克隆的可拖动对象的位置和大小 JQuery

Question

我有一个 div (canvas)，它作为一个可放置的矩形。被拖放到 div 上的矩形被克隆并且可以在 div.

中被拖动和调整大小

我的问题是：如何（重新）存储动态克隆元素的位置、大小？

工作原理：将多个矩形拖到 canvas 调整大小或将其拖动到矩形内点击保存

现在，它给了我正确数量的克隆矩形，但它只保存了最后一个克隆元素的位置和大小。

如何分别为每个克隆的矩形添加隐藏的文本字段？

$(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">

Answer 1

正如 Mike 所说，ID 需要是唯一的。我通过添加一个计数器 var i = 0 解决了这个问题，然后在每个新的 droppedRect 上将 id 属性设置为递增的数字。此外，我认为实现将数据放入矩形的相同目标的更好方法是通过 jQuery.data。我使用 jQueryUI 1.9，因为它在 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">

（重新）存储每个克隆的可拖动对象的位置和大小 JQuery

(re)store position and size of EACH cloned draggable JQuery

javascript

jquery

clone

jquery-ui