Wie man Header-Panels sortierbar macht

Question

Oct 30, 2016, 10:37 PM

jquery-ui-sortable jquery-ui-draggable jquery jquery-ui

Wie man Header-Panels sortierbar macht

er @ Report-Designer enthält Bootstrap 3-Bedienfelder. Panels enthalten divs.

Ich habe versucht, Header-Panels der Gruppen 1 und 2 zu erstellen (mit Klassepanel-sortable) mit @ sortierb

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

Panel-Reihenfolge kann nicht geändert werden. Nach dem Ziehen vonGroup 2 header zuGroup 1 header, um ihre Reihenfolge zu ändern. Alte Reihenfolge wird wiederhergestellt.

Wie können Header1 und 2 Panels sortiert werden, damit ihre Reihenfolge geändert werden kann?

Report kann viele Header enthalten. Wenn es eine andere Möglichkeit gibt, sie sortierbar zu machen, kann Code überarbeitet werden, um dies zu verwenden.

$(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>