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

improve removable behaviour

Browse source
This commit is contained in:
Pavel Reznikov 2016-02-23 20:13:11 -08:00
parent a51a802268
commit 9d12e25a02
5 changed files with 119 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

81
dist/gridstack.js vendored
View file

@ -664,6 +664,30 @@
$(window).resize(this.onResizeHandler);
this.onResizeHandler();
if (typeof self.opts.removable === 'string') {
var trashZone = $(self.opts.removable);
if (!trashZone.data('droppable')) {
trashZone.droppable({});
}
trashZone
.on('dropover', function(event, ui) {
var el = $(ui.draggable);
var node = el.data('_gridstack_node');
if (node._grid !== self) {
return;
}
self._setupRemovingTimeout(el);
})
.on('dropout', function(event, ui) {
var el = $(ui.draggable);
var node = el.data('_gridstack_node');
if (node._grid !== self) {
return;
}
self._clearRemovingTimeout(el);
});
}
};
GridStack.prototype._triggerChangeEvent = function(forceTrigger) {
@ -799,6 +823,32 @@
this.opts.minWidth;
};
GridStack.prototype._setupRemovingTimeout = function(el) {
var self = this;
var node = $(el).data('_gridstack_node');
if (node._removeTimeout || !self.opts.removable) {
return;
}
node._removeTimeout = setTimeout(function() {
el.addClass('grid-stack-item-removing');
node._isAboutToRemove = true;
}, self.opts.removeTimeout);
};
GridStack.prototype._clearRemovingTimeout = function(el) {
var self = this;
var node = $(el).data('_gridstack_node');
if (!node._removeTimeout) {
return;
}
clearTimeout(node._removeTimeout);
node._removeTimeout = null;
el.removeClass('grid-stack-item-removing');
node._isAboutToRemove = false;
};
GridStack.prototype._prepareElement = function(el, triggerAddEvent) {
triggerAddEvent = typeof triggerAddEvent != 'undefined' ? triggerAddEvent : false;
var self = this;
@ -819,32 +869,13 @@
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')
id: el.attr('data-gs-id'),
_grid: self
}, triggerAddEvent);
el.data('_gridstack_node', node);
var cellWidth;
var cellHeight;
var removeTimeout;
var setupRemovingTimeout = function() {
if (removeTimeout || !self.opts.removable) {
return;
}
removeTimeout = setTimeout(function() {
el.addClass('grid-stack-item-removing');
node._isAboutToRemove = true;
}, self.opts.removeTimeout);
};
var clearRemovingTimeout = function() {
if (!removeTimeout) {
return;
}
clearTimeout(removeTimeout);
removeTimeout = null;
el.removeClass('grid-stack-item-removing');
node._isAboutToRemove = false;
};
var dragOrResize = function(event, ui) {
var x = Math.round(ui.position.left / cellWidth);
@ -859,7 +890,9 @@
if (event.type == 'drag') {
if (x < 0 || x >= self.grid.width || y < 0) {
setupRemovingTimeout();
if (self.opts.removable === true) {
self._setupRemovingTimeout(el);
}
x = node._beforeDragX;
y = node._beforeDragY;
@ -871,7 +904,7 @@
node._temporaryRemoved = true;
} else {
clearRemovingTimeout();
self._clearRemovingTimeout(el);
if (node._temporaryRemoved) {
self.grid.addNode(node);
@ -937,7 +970,7 @@
el.removeData('_gridstack_node');
el.remove();
} else {
clearRemovingTimeout();
self._clearRemovingTimeout(el);
if (!node._temporaryRemoved) {
o
.attr('data-gs-x', node.x)

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

3
doc/README.md
View file

@ -77,7 +77,8 @@ gridstack.js API
- `placeholderClass` - class for placeholder (default: `'grid-stack-placeholder'`)
- `placeholderText` - placeholder default content (default: `''`)
- `resizable` - allows to override jQuery UI resizable options. (default: `{autoHide: true, handles: 'se'}`)
- `removable` - if `true` widgets could be removed by dragging outside of the grid (default: `false`)
- `removable` - if `true` widgets could be removed by dragging outside of the grid. It could also be a jQuery selector string, in this case
widgets will be removable by dropping at there (default: `false`) See [example](http://troolee.github.io/gridstack.js/demo/two.html)
- `removeTimeout` - time in milliseconds before widget is being removed while dragging outside of the grid. (default: `2000`)
- `rtl` - if `true` turns grid to RTL. Possible values are `true`, `false`, `'auto'` (default: `'auto'`) See [example](http://troolee.github.io/gridstack.js/demo/rtl.html)
- `staticGrid` - makes grid static (default `false`). If true widgets are not movable/resizable. You don't even need jQueryUI draggable/resizable. A CSS class `grid-stack-static` is also added to the container.

81
src/gridstack.js
View file

@ -664,6 +664,30 @@
$(window).resize(this.onResizeHandler);
this.onResizeHandler();
if (typeof self.opts.removable === 'string') {
var trashZone = $(self.opts.removable);
if (!trashZone.data('droppable')) {
trashZone.droppable({});
}
trashZone
.on('dropover', function(event, ui) {
var el = $(ui.draggable);
var node = el.data('_gridstack_node');
if (node._grid !== self) {
return;
}
self._setupRemovingTimeout(el);
})
.on('dropout', function(event, ui) {
var el = $(ui.draggable);
var node = el.data('_gridstack_node');
if (node._grid !== self) {
return;
}
self._clearRemovingTimeout(el);
});
}
};
GridStack.prototype._triggerChangeEvent = function(forceTrigger) {
@ -799,6 +823,32 @@
this.opts.minWidth;
};
GridStack.prototype._setupRemovingTimeout = function(el) {
var self = this;
var node = $(el).data('_gridstack_node');
if (node._removeTimeout || !self.opts.removable) {
return;
}
node._removeTimeout = setTimeout(function() {
el.addClass('grid-stack-item-removing');
node._isAboutToRemove = true;
}, self.opts.removeTimeout);
};
GridStack.prototype._clearRemovingTimeout = function(el) {
var self = this;
var node = $(el).data('_gridstack_node');
if (!node._removeTimeout) {
return;
}
clearTimeout(node._removeTimeout);
node._removeTimeout = null;
el.removeClass('grid-stack-item-removing');
node._isAboutToRemove = false;
};
GridStack.prototype._prepareElement = function(el, triggerAddEvent) {
triggerAddEvent = typeof triggerAddEvent != 'undefined' ? triggerAddEvent : false;
var self = this;
@ -819,32 +869,13 @@
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')
id: el.attr('data-gs-id'),
_grid: self
}, triggerAddEvent);
el.data('_gridstack_node', node);
var cellWidth;
var cellHeight;
var removeTimeout;
var setupRemovingTimeout = function() {
if (removeTimeout || !self.opts.removable) {
return;
}
removeTimeout = setTimeout(function() {
el.addClass('grid-stack-item-removing');
node._isAboutToRemove = true;
}, self.opts.removeTimeout);
};
var clearRemovingTimeout = function() {
if (!removeTimeout) {
return;
}
clearTimeout(removeTimeout);
removeTimeout = null;
el.removeClass('grid-stack-item-removing');
node._isAboutToRemove = false;
};
var dragOrResize = function(event, ui) {
var x = Math.round(ui.position.left / cellWidth);
@ -859,7 +890,9 @@
if (event.type == 'drag') {
if (x < 0 || x >= self.grid.width || y < 0) {
setupRemovingTimeout();
if (self.opts.removable === true) {
self._setupRemovingTimeout(el);
}
x = node._beforeDragX;
y = node._beforeDragY;
@ -871,7 +904,7 @@
node._temporaryRemoved = true;
} else {
clearRemovingTimeout();
self._clearRemovingTimeout(el);
if (node._temporaryRemoved) {
self.grid.addNode(node);
@ -937,7 +970,7 @@
el.removeData('_gridstack_node');
el.remove();
} else {
clearRemovingTimeout();
self._clearRemovingTimeout(el);
if (!node._temporaryRemoved) {
o
.attr('data-gs-x', node.x)