sortable - jquery ui section



如何使標題面板可排序 (0)

報表設計器包含Bootstrap 3面板。 面板包含divs。

我試圖使組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>





jquery-ui-draggable