动态元素和jquery ui（可拖动）

Question

我正在创建动态元素，用于使用百分比在绝对定位的基础上拖动和放置元素。问题是，当我添加更多动态元素时，除了创建的第一个元素之外，每次添加都会将图像拖动对齐 2%...

这是 codepen 链接。 https://codepen.io/designsbycamaron/pen/yLPmNXx

仅用于可拖动的代码。

$(".img_overlay").draggable({
          containment: "#bkg-area",
          stop: function () {
            var offset = $("#bkg-area").offset();
            var xPos = offset.left;
            var yPos = offset.top;
            var l =
              100 *
                parseFloat(
                  $(this).position().left / parseFloat($("#bkg-area").width())
                ) +
              "%";
            var t =
              100 *
                parseFloat(
                  $(this).position().top / parseFloat($("#bkg-area").height())
                ) +
              "%";
            $('input[name="pos_x_' + $(this).attr("store-data") + '"]').val(
              l
            );
            $('input[name="pos_y_' + $(this).attr("store-data") + '"]').val(
              t
            );
            $(this).css("left", l);
            $(this).css("top", t);
          }
        });