如何使标题面板可排序

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

我尝试使用panel-sortable排序的第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; } 

       
 
 
field 1 in group 1 header
 
 
Group 1 Header
 
 
 
 
field 1 in group 2 header
 
field 2 in group 2 header
 
 
Group 2 Header
 
 
 
 
field in detail group
 
 
Detail  Add group 
 
 
 
 
field in group 1 footer
 
 
Group 1 Footer