update gridstack.js
This commit is contained in:
Pavel Reznikov
parent
a716b24fb4
commit
1c04a89206
3 changed files with 87 additions and 33 deletions
|
|
@ -7,8 +7,8 @@
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
.grid-stack-item .grid-stack-item-content,
|
||||
.grid-stack-item .placeholder-content {
|
||||
.grid-stack-item > .grid-stack-item-content,
|
||||
.grid-stack-item > .placeholder-content {
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
overflow: auto;
|
||||
}
|
||||
|
||||
.grid-stack-placeholder .placeholder-content {
|
||||
.grid-stack-placeholder > .placeholder-content {
|
||||
border: 1px dashed lightgray;
|
||||
}
|
||||
|
||||
|
|
@ -29,26 +29,28 @@
|
|||
z-index: 100;
|
||||
}
|
||||
|
||||
.grid-stack-item.ui-draggable-dragging .grid-stack-item-content,
|
||||
.grid-stack-item.ui-resizable-resizing .grid-stack-item-content {
|
||||
.grid-stack-item.ui-draggable-dragging > .grid-stack-item-content,
|
||||
.grid-stack-item.ui-resizable-resizing > .grid-stack-item-content {
|
||||
box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.2);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.grid-stack-item .ui-resizable-handle {
|
||||
padding: 3px;
|
||||
margin: 3px 0;
|
||||
cursor: nwse-resize;
|
||||
.grid-stack-item > .ui-resizable-handle {
|
||||
}
|
||||
|
||||
:root .grid-stack-item > .ui-resizable-handle {
|
||||
filter: none;
|
||||
}
|
||||
|
||||
.grid-stack-item > .ui-resizable-se {
|
||||
text-align: right;
|
||||
color: gray;
|
||||
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 15px;
|
||||
|
||||
font-size: 10px;
|
||||
padding: 2px 3px 0 0;
|
||||
margin: 0;
|
||||
|
||||
display: inline-block;
|
||||
font: normal normal normal 14px/1 FontAwesome;
|
||||
font: normal normal normal 10px/1 FontAwesome;
|
||||
font-size: inherit;
|
||||
text-rendering: auto;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
|
@ -60,13 +62,58 @@
|
|||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
:root .grid-stack-item .ui-resizable-handle {
|
||||
filter: none;
|
||||
/** Uncomment this to show bottom-left resize handle **/
|
||||
/*
|
||||
.grid-stack-item > .ui-resizable-sw {
|
||||
text-align: right;
|
||||
color: gray;
|
||||
|
||||
padding: 2px 3px 0 0;
|
||||
margin: 0;
|
||||
|
||||
display: inline-block;
|
||||
font: normal normal normal 10px/1 FontAwesome;
|
||||
font-size: inherit;
|
||||
text-rendering: auto;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
|
||||
-webkit-transform: rotate(180deg);
|
||||
-ms-transform: rotate(180deg);
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.grid-stack-item .ui-resizable-handle::before {
|
||||
.grid-stack-item .ui-resizable-sw::before {
|
||||
content: "\f065";
|
||||
}
|
||||
*/
|
||||
|
||||
.grid-stack-item > .ui-resizable-se::before {
|
||||
content: "\f065";
|
||||
}
|
||||
|
||||
.ui-resizable-handle {
|
||||
position: absolute;
|
||||
font-size: 0.1px;
|
||||
display: block;
|
||||
-ms-touch-action: none;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.grid-stack-item.ui-resizable-disabled > .ui-resizable-handle,
|
||||
.grid-stack-item.ui-resizable-autohide > .ui-resizable-handle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.grid-stack-item > .ui-resizable-nw { cursor: nw-resize; width: 20px; height: 20px; left: 10px; top: 0; }
|
||||
.grid-stack-item > .ui-resizable-n { cursor: n-resize; height: 10px; top: 0; left: 25px; right: 25px; }
|
||||
.grid-stack-item > .ui-resizable-ne { cursor: ne-resize; width: 20px; height: 20px; right: 10px; top: 0; }
|
||||
.grid-stack-item > .ui-resizable-e { cursor: e-resize; width: 10px; right: 10px; top: 15px; bottom: 15px; }
|
||||
.grid-stack-item > .ui-resizable-se { cursor: se-resize; width: 20px; height: 20px; right: 10px; bottom: 0; }
|
||||
.grid-stack-item > .ui-resizable-s { cursor: s-resize; height: 10px; left: 25px; bottom: 0; right: 25px; }
|
||||
.grid-stack-item > .ui-resizable-sw { cursor: sw-resize; width: 20px; height: 20px; left: 10px; bottom: 0; }
|
||||
.grid-stack-item > .ui-resizable-w { cursor: w-resize; width: 10px; left: 10px; top: 15px; bottom: 15px; }
|
||||
|
||||
.grid-stack-item { min-width: 8.33333333% }
|
||||
|
||||
|
|
|
|||
32
gridstack.js
32
gridstack.js
|
|
@ -354,7 +354,16 @@
|
|||
float: false,
|
||||
_class: 'grid-stack-' + (Math.random() * 10000).toFixed(0),
|
||||
animate: Boolean(this.container.attr('data-gs-animate')) || false,
|
||||
always_show_resize_handle: opts.always_show_resize_handle || false
|
||||
always_show_resize_handle: opts.always_show_resize_handle || false,
|
||||
resizable: _.defaults(opts.resizable || {}, {
|
||||
autoHide: !(opts.always_show_resize_handle || false),
|
||||
handles: 'se'
|
||||
}),
|
||||
draggable: _.defaults(opts.draggable || {}, {
|
||||
handle: '.grid-stack-item-content',
|
||||
scroll: true,
|
||||
appendTo: 'body',
|
||||
})
|
||||
});
|
||||
|
||||
this.container.addClass(this.opts._class);
|
||||
|
|
@ -551,11 +560,7 @@
|
|||
self.grid.end_update();
|
||||
};
|
||||
|
||||
el.draggable({
|
||||
handle: this.opts.handle,
|
||||
scroll: true,
|
||||
appendTo: 'body',
|
||||
|
||||
el.draggable(_.extend(this.opts.draggable, {
|
||||
start: on_start_moving,
|
||||
stop: on_end_moving,
|
||||
drag: function (event, ui) {
|
||||
|
|
@ -567,24 +572,23 @@
|
|||
self.grid.move_node(node, x, y);
|
||||
self._update_container_height();
|
||||
}
|
||||
}).resizable({
|
||||
autoHide: !this.opts.always_show_resize_handle,
|
||||
handles: 'se',
|
||||
})).resizable(_.extend(this.opts.resizable, {
|
||||
minHeight: this.opts.cell_height - 10,
|
||||
minWidth: 70,
|
||||
|
||||
start: on_start_moving,
|
||||
stop: on_end_moving,
|
||||
resize: function (event, ui) {
|
||||
var width = Math.round(ui.size.width / cell_width),
|
||||
var x = Math.round(ui.position.left / cell_width),
|
||||
y = Math.floor((ui.position.top + cell_height/2) / cell_height),
|
||||
width = Math.round(ui.size.width / cell_width),
|
||||
height = Math.round(ui.size.height / cell_height);
|
||||
if (!self.grid.can_move_node(node, node.x, node.y, width, height)) {
|
||||
if (!self.grid.can_move_node(node, x, y, width, height)) {
|
||||
return;
|
||||
}
|
||||
self.grid.move_node(node, node.x, node.y, width, height);
|
||||
self.grid.move_node(node, x, y, width, height);
|
||||
self._update_container_height();
|
||||
}
|
||||
});
|
||||
}));
|
||||
|
||||
if (node.no_move || this._is_one_column_mode()) {
|
||||
el.draggable('disable');
|
||||
|
|
|
|||
|
|
@ -206,7 +206,10 @@ $(function () {
|
|||
$(function () {
|
||||
$('.grid-stack').gridstack({
|
||||
width: 12,
|
||||
always_show_resize_handle: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
|
||||
always_show_resize_handle: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent),
|
||||
resizable: {
|
||||
handles: 'e, se, s, sw, w'
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue