Question

报告设计师细节带包含添加带按钮，在按钮细节面板之前和之后立即添加新面板。

$parentpanel = $this.parents(".designer-panel:first");

用于查找父面板和.prepend（）/ append（）以添加新面板。

将面板添加为“详细信息”面板子元素。如何在同一DOM级别的详细信息面板之前和之后添加面板，如示例html中的组页眉和页脚面板。

元素应该添加到$parentpanel.parent()元素之前和之后的$parentpanel元素列表。

在jQuery中是否有一些选择器或追加命令？

$(function() {

  var startpos,
    selected = $([]),
    offset = {
      top: 0,
      left: 0
    };

  $('#designer-detail-addband').on('click', function() {
    var $this = $(this),
      $parentpanel = $this.parents(".designer-panel:first");

    $parentpanel.prepend('<div class="panel designer-panel">' +
      '<div class="panel-body designer-panel-body" style="height:1px">' +
      '</div>' +
      '<div class="bg-warning">' +
      '<div class="panel-footer"><i class="glyphicon glyphicon-chevron-up">' +
      '</i> Group heade {0}: <span id="band{0}_expr" contenteditable="true">"groupexpression"</span>' +
      '</div></div></div>');

    $parentpanel.append('<div class="panel designer-panel">' +
      '<div class="panel-body designer-panel-body" style="height:1px"></div>' +
      '<div class="bg-warning">' +
      '<div class="panel-footer"><i class="glyphicon glyphicon-chevron-up">' +
      '</i> Group footer {0}' +
      '</div></div></div>');

  });

  $(".designer-panel-body").droppable({
    accept: ".designer-field"
  });

  $(".designer-field").draggable({
    start: function(event, ui) {
      var $this = $(this);
      if ($this.hasClass("ui-selected")) {
        selected = $(".ui-selected").each(function() {
          var el = $(this);
          el.data("offset", el.offset());
        });
      } else {
        selected = $([]);
        $(".designer-field").removeClass("ui-selected");
      }
      offset = $this.offset();
    },

    drag: function(event, ui) {
      // drag all selected elements simultaneously
      var dt = ui.position.top - offset.top,
        dl = ui.position.left - offset.left;
      selected.not(this).each(function() {
        var $this = $(this);
        var elOffset = $this.data("offset");
        $this.css({
          top: elOffset.top + dt,
          left: elOffset.left + dl
        });
      });
    }
  });

  $(".panel-resizable").resizable({
    minWidth: "100%",
    maxWidth: "100%",
    minHeight: 1
  });
})

.panel-resizable {
  min-height: 1px;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.designer-field {
  border: 1px solid lightgray;
  white-space: pre;
  overflow: hidden;
  position: absolute;
}
.designer-panel-body {
  min-height: 1px;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.panel-footer {
  padding: 0;
}
.designer-panel,
.panel-body {
  margin: 0;
  padding: 0;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>

<body>
  <div class='panel designer-panel'>
    <div class='panel-body designer-panel-body panel-resizable' style='height:2cm'>

      <div class='designer-field' style='left:5px;top:6px;width:180px'>field 1 in group 1 header</div>

      <div class='designer-field' style='left:54px;top :36px;width:160px'>field 2 in group 1 header</div>
    </div>

    <div class='panel-footer'>Group 1 Header</div>
  </div>

  <div class='panel designer-panel'>
    <div class='panel-body panel-resizable' style='height:1cm'>
      <div class='designer-field' style='left:24px;top:2px;width:140px'>field in detail group</div>
    </div>
    <div class='panel-footer panel-primary'>Detail <a role="button" id="designer-detail-addband"> Add group</a>
    </div>
  </div>

  <div class='panel'>
    <div class='panel-body panel-resizable' style='height:1cm'>

      <div class='designer-field' style='left:44px;top:2px;width:140px'>field in group 1 footer</div>
    </div>
    <div class='panel-footer panel-warning'>Group 1 Footer</div>
  </div>

Answer 1

尝试使用jQuery的before，after函数。或insertBefore，insertAfter

您也可以使用

$this.closest(".designer-panel");

而不是

$this.parents(".designer-panel:first");

请参阅closest

如何在单击面板之前和之后添加新面板

1 个答案: