Question

嘿所有我正在尽我所能让当前的代码正常工作。我正在尝试在现有框中创建一个新的 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中

1 个答案: