deblan/gridstack.js
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

add movable/resizable API methods

Browse source
This commit is contained in:
Pavel Reznikov 2014-11-20 17:56:36 -08:00
parent 137ea915e5
commit faf2ee1140
3 changed files with 88 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
README.md
View file

@ -119,6 +119,20 @@ Parameters:
- `el` - widget to remove
### resizable(el, val)
Enables/Disables resizing.
- `el` - widget to modify
- `val` - if `true` widget will be resizable.
### movable(el, val)
Enables/Disables moving.
- `el` - widget to modify
- `val` - if `true` widget will be draggable.
## Use with knockout.js
```javascript
@ -178,6 +192,8 @@ Changes
#### v0.1.1 (development version)
- add `resizable` and `movable` API methods
- add `data-gs-no-move` attribute
- add `float` option
- fix default css rule for inner content

2
dist/gridstack.min.js vendored
View file

File diff suppressed because one or more lines are too long

108
src/gridstack.js
View file

@ -375,47 +375,41 @@
});
};
if (!node.no_move) {
el.draggable({
handle: this.opts.handle,
scroll: true,
appendTo: 'body',
el.draggable({
handle: this.opts.handle,
scroll: true,
appendTo: 'body',
start: on_start_moving,
stop: on_end_moving,
drag: function (event, ui) {
var x = Math.round(ui.position.left / cell_width),
y = Math.floor(ui.position.top / cell_height);
self.grid.move_node(node, x, y);
self._update_container_height();
}
});
if (this._is_one_column_mode()) {
el.draggable('disable');
start: on_start_moving,
stop: on_end_moving,
drag: function (event, ui) {
var x = Math.round(ui.position.left / cell_width),
y = Math.floor(ui.position.top / cell_height);
self.grid.move_node(node, x, y);
self._update_container_height();
}
}).resizable({
autoHide: true,
handles: 'se',
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),
height = Math.round(ui.size.height / cell_height);
self.grid.move_node(node, node.x, node.y, width, height);
self._update_container_height();
}
});
if (node.no_move || this._is_one_column_mode()) {
el.draggable('disable');
}
if (!node.no_resize) {
el.resizable({
autoHide: true,
handles: 'se',
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),
height = Math.round(ui.size.height / cell_height);
self.grid.move_node(node, node.x, node.y, width, height);
self._update_container_height();
}
});
if (this._is_one_column_mode()) {
el.resizable('disable');
}
if (node.no_resize || this._is_one_column_mode()) {
el.resizable('disable');
}
};
@ -438,6 +432,46 @@
this._update_container_height();
};
GridStack.prototype.resizable = function (el, val) {
el = $(el);
el.each(function (index, el) {
el = $(el);
var node = el.data('_gridstack_node');
if (typeof node == 'undefined') {
return;
}
node.no_resize = !(val || false);
if (node.no_resize) {
el.resizable('disable');
}
else {
el.resizable('enable');
}
});
return this;
};
GridStack.prototype.movable = function (el, val) {
el = $(el);
el.each(function (index, el) {
el = $(el);
var node = el.data('_gridstack_node');
if (typeof node == 'undefined') {
return;
}
node.no_move = !(val || false);
if (node.no_move) {
el.draggable('disable');
}
else {
el.draggable('enable');
}
});
return this;
};
scope.GridStackUI = GridStack;
$.fn.gridstack = function (opts) {