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

drag between grids

Browse source
This commit is contained in:
Pavel Reznikov 2016-02-29 23:10:23 -08:00
parent d010ddd93e
commit ea442d1936
6 changed files with 161 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
README.md
View file

@ -479,11 +479,12 @@ Changes
- fix `setStatic` method
- add `setAnimation` method to API
- add `setGridWidth` method ([#227](https://github.com/troolee/gridstack.js/issues/227))
- add `removable`/`removeTimeout`
- add `removable`/`removeTimeout` *(experimental)*
- add `detachGrid` parameter to `destroy` method ([#216](https://github.com/troolee/gridstack.js/issues/216)) (thanks @jhpedemonte)
- add `useOffset` parameter to `getCellFromPixel` method ([#237](https://github.com/troolee/gridstack.js/issues/237))
- add `minWidth`, `maxWidth`, `minHeight`, `maxHeight`, `id` parameters to `addWidget` ([#188](https://github.com/troolee/gridstack.js/issues/188))
- add `added` and `removed` events for when a widget is added or removed, respectively. ([#54](https://github.com/troolee/gridstack.js/issues/54))
- add `acceptWidgets` parameter. Widgets can now be draggable between grids or from outside *(experimental)*
#### v0.2.4 (2016-02-15)

175
dist/gridstack.js vendored
View file

@ -576,7 +576,9 @@
var maxHeight = 0;
_.each(nodes, function(n) {
if (n._id === null) {
n.el.remove();
if (n.el) {
n.el.remove();
}
} else {
n.el
.attr('data-gs-x', n.x)
@ -671,7 +673,9 @@
if (typeof self.opts.removable === 'string') {
var trashZone = $(self.opts.removable);
if (!trashZone.data('droppable')) {
trashZone.droppable({});
trashZone.droppable({
accept: '.' + self.opts.itemClass
});
}
trashZone
.on('dropover', function(event, ui) {
@ -691,6 +695,114 @@
self._clearRemovingTimeout(el);
});
}
if (self.opts.acceptWidgets) {
var draggingElement = null;
var onDrag = function(event, ui) {
var el = draggingElement;
var node = el.data('_gridstack_node');
var pos = self.getCellFromPixel(ui.offset, true);
var x = Math.max(0, pos.x);
var y = Math.max(0, pos.y);
if (!node._added) {
node._added = true;
node.el = el;
node.x = x;
node.y = y;
self.grid.cleanNodes();
self.grid.beginUpdate(node);
self.grid.addNode(node);
self.container.append(self.placeholder);
self.placeholder
.attr('data-gs-x', node.x)
.attr('data-gs-y', node.y)
.attr('data-gs-width', node.width)
.attr('data-gs-height', node.height)
.show();
node.el = self.placeholder;
node._beforeDragX = node.x;
node._beforeDragY = node.y;
self._updateContainerHeight();
} else {
if (!self.grid.canMoveNode(node, x, y)) {
return;
}
self.grid.moveNode(node, x, y);
self._updateContainerHeight();
}
};
$(self.container).droppable({
accept: function(el) {
el = $(el);
var node = el.data('_gridstack_node');
if (node && node._grid === self) {
return false;
}
return el.is(self.opts.acceptWidgets === true ? '.grid-stack-item' : self.opts.acceptWidgets);
},
over: function(event, ui) {
var offset = self.container.offset();
var el = $(ui.draggable);
var cellWidth = self.cellWidth();
var cellHeight = self.cellHeight();
var origNode = el.data('_gridstack_node');
var width = origNode ? origNode.width : (Math.ceil(el.outerWidth() / cellWidth));
var height = origNode ? origNode.height : (Math.ceil(el.outerHeight() / cellHeight));
draggingElement = el;
var node = self.grid._prepareNode({width: width, height: height, _added: false, _temporary: true});
el.data('_gridstack_node', node);
el.data('_gridstack_node_orig', origNode);
el.on('drag', onDrag);
},
out: function(event, ui) {
var el = $(ui.draggable);
el.unbind('drag', onDrag);
var node = el.data('_gridstack_node');
node.el = null;
self.grid.removeNode(node);
self.placeholder.detach();
self._updateContainerHeight();
el.data('_gridstack_node', el.data('_gridstack_node_orig'));
},
drop: function(event, ui) {
self.placeholder.detach();
var node = $(ui.draggable).data('_gridstack_node');
node._grid = self;
var el = $(ui.draggable).clone(false);
el.data('_gridstack_node', node);
$(ui.draggable).remove();
node.el = el;
self.placeholder.hide();
el
.attr('data-gs-x', node.x)
.attr('data-gs-y', node.y)
.attr('data-gs-width', node.width)
.attr('data-gs-height', node.height)
.addClass(self.opts.itemClass)
.removeAttr('style')
.enableSelection()
.removeData('draggable')
.removeClass('ui-draggable ui-draggable-dragging ui-draggable-disabled')
.unbind('drag', onDrag);
self.container.append(el);
self._prepareElementByNode(el, node);
self._updateContainerHeight();
self._triggerChangeEvent();
self.grid.endUpdate();
}
});
}
};
GridStack.prototype._triggerChangeEvent = function(forceTrigger) {
@ -840,7 +952,6 @@
};
GridStack.prototype._clearRemovingTimeout = function(el) {
var self = this;
var node = $(el).data('_gridstack_node');
if (!node._removeTimeout) {
@ -852,30 +963,8 @@
node._isAboutToRemove = false;
};
GridStack.prototype._prepareElement = function(el, triggerAddEvent) {
triggerAddEvent = typeof triggerAddEvent != 'undefined' ? triggerAddEvent : false;
GridStack.prototype._prepareElementByNode = function(el, node) {
var self = this;
el = $(el);
el.addClass(this.opts.itemClass);
var node = self.grid.addNode({
x: el.attr('data-gs-x'),
y: el.attr('data-gs-y'),
width: el.attr('data-gs-width'),
height: el.attr('data-gs-height'),
maxWidth: el.attr('data-gs-max-width'),
minWidth: el.attr('data-gs-min-width'),
maxHeight: el.attr('data-gs-max-height'),
minHeight: el.attr('data-gs-min-height'),
autoPosition: Utils.toBool(el.attr('data-gs-auto-position')),
noResize: Utils.toBool(el.attr('data-gs-no-resize')),
noMove: Utils.toBool(el.attr('data-gs-no-move')),
locked: Utils.toBool(el.attr('data-gs-locked')),
el: el,
id: el.attr('data-gs-id'),
_grid: self
}, triggerAddEvent);
el.data('_gridstack_node', node);
var cellWidth;
var cellHeight;
@ -962,9 +1051,13 @@
};
var onEndMoving = function(event, ui) {
var o = $(this);
if (!o.data('_gridstack_node')) {
return;
}
var forceNotify = false;
self.placeholder.detach();
var o = $(this);
node.el = o;
self.placeholder.hide();
@ -1031,6 +1124,34 @@
el.attr('data-gs-locked', node.locked ? 'yes' : null);
};
GridStack.prototype._prepareElement = function(el, triggerAddEvent) {
triggerAddEvent = typeof triggerAddEvent != 'undefined' ? triggerAddEvent : false;
var self = this;
el = $(el);
el.addClass(this.opts.itemClass);
var node = self.grid.addNode({
x: el.attr('data-gs-x'),
y: el.attr('data-gs-y'),
width: el.attr('data-gs-width'),
height: el.attr('data-gs-height'),
maxWidth: el.attr('data-gs-max-width'),
minWidth: el.attr('data-gs-min-width'),
maxHeight: el.attr('data-gs-max-height'),
minHeight: el.attr('data-gs-min-height'),
autoPosition: Utils.toBool(el.attr('data-gs-auto-position')),
noResize: Utils.toBool(el.attr('data-gs-no-resize')),
noMove: Utils.toBool(el.attr('data-gs-no-move')),
locked: Utils.toBool(el.attr('data-gs-locked')),
el: el,
id: el.attr('data-gs-id'),
_grid: self
}, triggerAddEvent);
el.data('_gridstack_node', node);
this._prepareElementByNode(el, node);
};
GridStack.prototype.setAnimation = function(enable) {
if (enable) {
this.container.addClass('grid-stack-animate');

4
dist/gridstack.min.js vendored
View file

File diff suppressed because one or more lines are too long

2
dist/gridstack.min.map vendored
View file

File diff suppressed because one or more lines are too long

2
doc/README.md
View file

@ -56,6 +56,8 @@ gridstack.js API
## Options
- `acceptWidgets` - if `true` of jquery selector the grid will accept widgets dragged from other grids or from
outside (default: `false`) See [example](http://troolee.github.io/gridstack.js/demo/two.html)
- `alwaysShowResizeHandle` - if `true` the resizing handles are shown even if the user is not hovering over the widget
(default: `false`)
- `animate` - turns animation on (default: `false`)

9
src/gridstack.js
View file

@ -771,6 +771,7 @@
self.grid.removeNode(node);
self.placeholder.detach();
self._updateContainerHeight();
el.data('_gridstack_node', el.data('_gridstack_node_orig'));
},
drop: function(event, ui) {
self.placeholder.detach();
@ -791,7 +792,6 @@
.removeAttr('style')
.enableSelection()
.removeData('draggable')
// .unbind('.draggable')
.removeClass('ui-draggable ui-draggable-dragging ui-draggable-disabled')
.unbind('drag', onDrag);
self.container.append(el);
@ -952,7 +952,6 @@
};
GridStack.prototype._clearRemovingTimeout = function(el) {
var self = this;
var node = $(el).data('_gridstack_node');
if (!node._removeTimeout) {
@ -1052,9 +1051,13 @@
};
var onEndMoving = function(event, ui) {
var o = $(this);
if (!o.data('_gridstack_node')) {
return;
}
var forceNotify = false;
self.placeholder.detach();
var o = $(this);
node.el = o;
self.placeholder.hide();