Javascript 将可拖动框添加到与第一个框相同的div中

嘿，我正在尽我最大的努力让这段代码正常工作。我正在尝试在现有的框中创建一个新的可拖动框，以便可以添加无限量的框

但是，目前似乎将第二个框放置在第一个框所在的原始框之外

演示就在这里

javascript代码的主要部分是：

$('#buttonPush').on('click', function(e) {
   var _tmpLabelBox = "fakeLabel" + fakeCount;

   if (fakeCount == 0) {
     $('body').append('<div id="thePDFPage">' +
       '<div id="' + _tmpLabelBox + '" contenteditable="true" data-type="labelBox" data-posxy="0,0" class="fakeLabel">' +
       '<div class="handle" contenteditable="false"></div>' +
       '&nbsp;' +
       '</div>' +
       '</div>');
   } else {
     $('body').append('<div id="' + _tmpLabelBox + '" contenteditable="true" data-type="labelBox" data-posxy="0,0" class="fakeLabel">' +
       '<div class="handle" contenteditable="false"></div>' +
       '&nbsp;' +
       '</div>');
   }

   $("#" + _tmpLabelBox).on('keydown', function(e) {
     e = e || event;
     var code = e.which || e.keyCode || e.charCode;
     var cando = !([46, 13].indexOf(code) > -1);

     if (code == 8) {
       if ($(this).text().length == 0) {
         return false;
       } else {
         return cando;
       }
     } else {
       return cando;
     }
   });

   $("#" + _tmpLabelBox).resizable({
     containment: "#thePDFPage",
     grid: 5,
     autoHide: true,
     handles: "e",
     stop: function(event, ui) {
       //$(ui.element).height('auto');
     }
   });

   $("#" + _tmpLabelBox).autoresize({
     padding: 10,
     minWidth: 50,
     maxWidth: 300
   });

   $('#' + _tmpLabelBox).draggabilly({
     handle: '.handle',
     containment: true,
     grid: [5, 5]
   });

   $('#' + _tmpLabelBox).on('click', function() {
     $('div.selected').removeClass('selected');
     $(this).addClass('selected');
   }).keydown(function(e) {
     var div = $('div.selected');
     switch (e.which) {
       case 37:
         div.stop().animate({
           left: '-=5'
         });
         break;
       case 38:
         div.stop().animate({
           top: '-=5'
         });
         break;
       case 39:
         div.stop().animate({
           left: '+=5'
         });
         break;
       case 40:
         div.stop().animate({
           top: '+=5'
         });
         break;
     }
   });

   $('#' + _tmpLabelBox).on('dragEnd', function(event, pointer, moveVector) {
     var _tmpDragElement = $(this).data('draggabilly');

     $(this).attr('data-posXY', _tmpDragElement.position.x + "," + _tmpDragElement.position.y);
   });

   callWysiwyg(_tmpLabelBox);
   fakeCount++;
})

$（'#buttonPush'）。在（'click'，函数（e）上{
var_tmpLabelBox=“fakeLabel”+fakeCount；
如果（fakeCount==0）{
$（'body'）。附加（'+
'' +
'' +
' ' +
'' +
'');
}否则{
$（'body'）。附加（'+
'' +
' ' +
'');
}
$（“#”+_tmpLabelBox）.on（'keydown'，函数（e）{
e=e | |事件；
var code=e.which | e.keyCode | e.charCode；
var cando=！（[46,13].indexOf（code）>-1）；
如果（代码==8）{
if（$（this）.text（）.length==0）{
返回false；
}否则{
返回坎多；
}
}否则{
返回坎多；
}
});
$（“#”+_tmpLabelBox）。可调整大小({
包含内容：“#thePDFPage”，
网格：5，
自动隐藏：对，
手柄：“e”，
停止：功能（事件、用户界面）{
//$（ui.element）.height（'auto'）；
}
});
$（“#”+_tmpLabelBox）。自动调整大小({
填充：10，
最小宽度：50，
最大宽度：300
});
$（'#'+_tmpLabelBox）。可拖动({
句柄：'.handle'，
遏制:对,，
网格：[5,5]
});
$（'#'+_tmpLabelBox）.on（'click'，function（）{
$（'div.selected'）.removeClass（'selected'）；
$（this.addClass（'selected'）；
}).keydown（功能（e）{
var div=$（'div.selected'）；
开关（e.which）{
案例37：
div.stop（）.animate({
左：'-=5'
});
打破
案例38：
div.stop（）.animate({
顶部：'-=5'
});
打破
案例39：
div.stop（）.animate({
左：'+=5'
});
打破
案例40：
div.stop（）.animate({
顶部：'+=5'
});
打破
}
});
$（'#'+_tmpLabelBox）.on（'dragEnd'，函数（事件、指针、移动向量）{
var_tmpdragement=$（this）.data（'draggabilly'）；
$（this.attr（'data-posXY'，_tmpdragement.position.x+“，”+_tmpdragement.position.y）；
});
callWysiwyg（_tmpLabelBox）；
伪造计数++；
})

---

为了将其作为第一个框放入save DIV，我不太确定我缺少了什么。

您正在创建一个

DIV

，其id为

thePDFPage

，其中包含一个

所见即所得容器。此容器是您最终添加“可拖动”项的位置。在代码的
else
部分中，所有后续项目都必须添加到
wysiwyg容器中

谢谢你的帮助，Yass。你注意到它在第三次点击按钮（区域下方）后创建的额外文本框了吗？我注意到了，但我不确定问题出在哪里。等我有时间的时候我会看一看的。你知道为什么要这样做吗？我也无法确定原因。不确定。你的代码很乱，所以很难破译到底发生了什么。