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

Question

嘿，我正在尽最大努力使当前代码正常工作。我正在尝试在 existing 框内创建一个新的 draggabilly 框，以便我可以添加无限数量的框。

但是，目前它似乎将第二个盒子放在第一个盒子所在的原始盒子之外。

JSFIDDLE 演示为您准备。

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++;
})

我不太确定为了将它作为第一个盒子放入存档 DIV 我还缺少什么。

Answer 1

您正在创建 div，id 为 thePDFPage，其中包含 wysiwyg-container。该容器是您最终添加 "draggable" 项目的地方。在代码的 else 部分，所有后续项目都必须添加到 wysiwyg-container.

Updated Fiddle

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

Adding draggable box into same div as first box

javascript

jquery

drag-and-drop

jquery-ui

append