Question

报表设计器包含Bootstrap 3面板。面板包含div。

我尝试使用

制作第1组和第2组标题面板（具有类panel-sortable）

$(".panel-sortable").sortable().disableSelection();

面板顺序无法更改。将Group 2 header拖至Group 1 header以更改其订单面板后，将恢复旧订单。

如何对header1和2面板进行排序以便更改其顺序？

报告可以包含许多标题。如果还有其他方法可以对它们进行排序，那么代码可以重构以使用它。

$(function() {

  var startpos,
    selected = $([]),
    offset = {
      top: 0,
      left: 0
    };

$(".panel-sortable").sortable().disableSelection();

  
  $(".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 panel-sortable'>
    <div class='panel-body designer-panel-body panel-resizable' style='height:1cm'>
      <div class='designer-field' style='left:5px;top:6px;width:180px'>field 1 in group 1 header</div>

      
    </div>

    <div class='panel-footer'>Group 1 Header</div>
  </div>

  
  
 
    <div class='panel designer-panel panel-sortable'>
    <div class='panel-body designer-panel-body panel-resizable' style='height:2cm'>
      <div class='designer-field' style='left:35px;top:6px;width:180px'>field 1 in group 2 header</div>

      <div class='designer-field' style='left:14px;top :36px;width:160px'>field 2 in group 2 header</div>
    </div>

    <div class='panel-footer'>Group 2 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>

如何使标题面板排序

0 个答案: