jquery - plantilla - Cómo hacer que los paneles de encabezado puedan clasificarse
plantilla divi wordpress gratis (0)
El diseñador de informes contiene paneles Bootstrap 3. Los paneles contienen divs.
Traté de hacer cuadros de cabecera de los Grupos 1 y 2 (con clasificación en panel-sortable clase) para poder clasificarlos
$(".panel-sortable").sortable().disableSelection();
La orden del panel no puede cambiarse. Después de arrastrar el Group 2 header del Group 1 header para cambiar su orden, se restaura el orden anterior del panel.
¿Cómo hacer que los encabezados 1 y 2 puedan clasificarse para que su orden pueda cambiar?
El informe puede contener muchos encabezados. Si hay alguna otra forma de hacerlos ordenables, el código puede ser refactorizado para usar eso.
$(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>