"Movable, Sortable, Resizable, Collapsible Toolbar Panel with Collapsible Groups"
Bootstrap 3.3.0 Snippet by fractorr

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<div class="panel panel-primary draggable-panel toolbar-panel ui-draggable ui-resizable" id="toolbox-tools">
<div class="panel-heading lang-panel-header-tools">Tools <i class="fa fa-times pull-right close-panel" id="close-toolbox-tools"></i><i class="fa pull-right fa-chevron-down" id="toggle-toolbox-tools"></i></div>
<ul id="sortable" class="ui-sortable">
<li class="btn-group draggable-group ui-state-default" id="group-file">
<div class="btn-warning pull-left group-handle"><i class="fa fa-caret-down fa-1 toggle-button-group" data-toggle="tooltip" data-placement="bottom" title="Expand / Colapse"></i></div>
<button class="btn btn-primary btn-md" id="btn_empty" data-toggle="tooltip" data-placement="bottom" title="Empty (e)"><i class="fa fa-file-text-o "></i></button>
<button class="btn btn-primary btn-md" id="btn_svgOpen" data-toggle="tooltip" data-placement="bottom" title="Open (Alt+o)"><i class="fa fa-upload "></i></button>
<button class="btn btn-primary btn-md" id="btn_svgSave" data-toggle="tooltip" data-placement="bottom" title="Save (Alt+s)"><i class="fa fa-download "></i></button>
</li>
<li class="btn-group draggable-group ui-state-default" id="group-toggle-lanes">
<div class="btn-warning pull-left group-handle"><i class="fa fa-caret-down fa-1 toggle-button-group" data-toggle="tooltip" data-placement="bottom" title="Expand / Colapse"></i></div>
<button class="btn btn-primary btn-md" id="btn_1_lanes" data-toggle="tooltip" data-placement="bottom" title="Set 1 lane displayed of the selected parts (1)"><i class="fa fa-minus"></i></button>
<button class="btn btn-primary btn-md" id="btn_2_lanes" data-toggle="tooltip" data-placement="bottom" title="Set 2 lanes displayed of the selected parts (2)"><i class="fa fa-align-justify lanes_2"></i></button>
<button class="btn btn-primary btn-md" id="btn_3_lanes" data-toggle="tooltip" data-placement="bottom" title="Set 3 lanes displayed of the selected parts (3)"><i class="fa fa-reorder "></i></button>
<button class="btn btn-primary btn-md" id="btn_4_lanes" data-toggle="tooltip" data-placement="bottom" title="Set 4 lanes displayed of the selected parts (4)"><i class="fa fa-align-justify "></i></button>
</li>
<li class="btn-group draggable-group ui-state-default" id="group-part-sequence">
<div class="btn-warning pull-left group-handle"><i class="fa fa-caret-down fa-1 toggle-button-group" data-toggle="tooltip" data-placement="bottom" title="Expand / Colapse"></i></div>
<button class="btn btn-primary btn-md" id="btn_part_sequence_minus" data-toggle="tooltip" data-placement="bottom" title="Decrement part sequence number (Alt+-)"><i class="fa fa-minus"></i><i class="fa fa-sort-numeric-asc"></i></button>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
#toolbox-tools {
width: 660px;
height: 160px;
overflow: hidden;
}
.group-handle {
height: 34px;
width: 10px;
cursor: move;
}
.panel-heading {
cursor: move;
}
.draggable-group {
float: left;
}
#sortable {
padding: 0px;
}
#sort-holder {
display: none;
}
#toggle-toolbox-tools {
cursor: pointer;
}
#close-toolbox-tools {
cursor: pointer;
}
.toggle-button-group {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(document).ready(function() {
// Add drag and resize option to panel
$("#toolbox-tools").draggable({
handle: ".panel-heading",
stop: function(evt, el) {
// Save size and position in cookie
/*
$.cookie($(evt.target).attr("id"), JSON.stringify({
"el": $(evt.target).attr("id"),
"left": el.position.left,
"top": el.position.top,
"width": $(evt.target).width(),
"height": $(evt.target).height()
}));
*/
}
}).resizable({
handles: "e, w, s, se",
stop: function(evt, el) {
// Save size and position in cookie
/*
$.cookie($(evt.target).attr("id"), JSON.stringify({
"el": $(evt.target).attr("id"),
"left": el.position.left,
"top": el.position.top,
"width": el.size.width,
"height": el.size.height
}));
*/
}
});
// Expand and collaps the toolbar
$("#toggle-toolbox-tools").on("click", function() {
var panel = $("#toolbox-tools");
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: