Skip to content

Commit 2075d25

Browse files
trooleetroolee
committed
add removable option
1 parent a5d06d2 commit 2075d25

File tree

4 files changed

+102
-9
lines changed

4 files changed

+102
-9
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -444,6 +444,7 @@ Changes
444444
- fix `setStatic` method
445445
- add `setAnimation` method to API
446446
- add `setGridWidth` method ([#227](https://github.com/troolee/gridstack.js/issues/227))
447+
- add `removable`/`removeTimeout`
447448

448449
#### v0.2.4 (2016-02-15)
449450

‎demo/two.html‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,14 @@
3535
text-align: center;
3636
background-color: #18bc9c;
3737
}
38+
39+
#grid2 .grid-stack-item-content {
40+
background-color: #9caabc;
41+
}
42+
43+
.grid-stack-item-removing {
44+
opacity: 0.5;
45+
}
3846
</style>
3947
</head>
4048
<body>
@@ -58,7 +66,8 @@ <h1>Two grids demo</h1>
5866
$(function () {
5967
var options = {
6068
width: 6,
61-
float: true
69+
float: true,
70+
removable: true
6271
};
6372
$('#grid1').gridstack(options);
6473
$('#grid2').gridstack(options);

‎doc/README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,8 @@ gridstack.js API
7575
- `placeholderClass` - class for placeholder (default: `'grid-stack-placeholder'`)
7676
- `placeholderText` - placeholder default content (default: `''`)
7777
- `resizable` - allows to override jQuery UI resizable options. (default: `{autoHide: true, handles: 'se'}`)
78+
- `removable` - if `true` widgets could be removed by dragging outside of the grid (default: `false`)
79+
- `removeTimeout` - time in milliseconds before widget is being removed while dragging outside of the grid. (default: `2000`)
7880
- `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)
7981
- `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.
8082
- `verticalMargin` - vertical gap size (default: `20`). Can be:

‎src/gridstack.js‎

Lines changed: 89 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -534,7 +534,9 @@
534534
}),
535535
disableDrag: opts.disableDrag || false,
536536
disableResize: opts.disableResize || false,
537-
rtl: 'auto'
537+
rtl: 'auto',
538+
removable: false,
539+
removeTimeout: 2000
538540
});
539541

540542
if (this.opts.rtl === 'auto') {
@@ -805,17 +807,73 @@
805807

806808
var cellWidth;
807809
var cellHeight;
810+
var removeTimeout;
811+
812+
var setupRemovingTimeout = function() {
813+
if (removeTimeout || !self.opts.removable) {
814+
return;
815+
}
816+
removeTimeout = setTimeout(function() {
817+
el.addClass('grid-stack-item-removing');
818+
node._isAboutToRemove = true;
819+
}, self.opts.removeTimeout);
820+
};
821+
var clearRemovingTimeout = function() {
822+
if (!removeTimeout) {
823+
return;
824+
}
825+
clearTimeout(removeTimeout);
826+
removeTimeout = null;
827+
el.removeClass('grid-stack-item-removing');
828+
node._isAboutToRemove = false;
829+
};
808830

809831
var dragOrResize = function(event, ui) {
810832
var x = Math.round(ui.position.left / cellWidth);
811833
var y = Math.floor((ui.position.top + cellHeight / 2) / cellHeight);
812834
var width;
813835
var height;
836+
814837
if (event.type != 'drag') {
815838
width = Math.round(ui.size.width / cellWidth);
816839
height = Math.round(ui.size.height / cellHeight);
817840
}
818841

842+
if (event.type == 'drag') {
843+
if (x < 0 || x >= self.grid.width || y < 0) {
844+
setupRemovingTimeout();
845+
846+
x = node._beforeDragX;
847+
y = node._beforeDragY;
848+
849+
self.placeholder.detach();
850+
self.placeholder.hide();
851+
self.grid.removeNode(node);
852+
self._updateContainerHeight();
853+
854+
node._temporaryRemoved = true;
855+
} else {
856+
clearRemovingTimeout();
857+
858+
if (node._temporaryRemoved) {
859+
self.grid.addNode(node);
860+
self.placeholder
861+
.attr('data-gs-x', x)
862+
.attr('data-gs-y', y)
863+
.attr('data-gs-width', width)
864+
.attr('data-gs-height', height)
865+
.show();
866+
self.container.append(self.placeholder);
867+
node.el = self.placeholder;
868+
node._temporaryRemoved = false;
869+
}
870+
}
871+
} else if (event.type == 'resize') {
872+
if (x < 0) {
873+
return;
874+
}
875+
}
876+
819877
if (!self.grid.canMoveNode(node, x, y, width, height)) {
820878
return;
821879
}
@@ -838,6 +896,8 @@
838896
.attr('data-gs-height', o.attr('data-gs-height'))
839897
.show();
840898
node.el = self.placeholder;
899+
node._beforeDragX = node.x;
900+
node._beforeDragY = node.y;
841901

842902
el.resizable('option', 'minWidth', cellWidth * (node.minWidth || 1));
843903
el.resizable('option', 'minHeight', strictCellHeight * (node.minHeight || 1));
@@ -848,18 +908,39 @@
848908
};
849909

850910
var onEndMoving = function(event, ui) {
911+
var forceNotify = false;
851912
self.placeholder.detach();
852913
var o = $(this);
853914
node.el = o;
854915
self.placeholder.hide();
855-
o
856-
.attr('data-gs-x', node.x)
857-
.attr('data-gs-y', node.y)
858-
.attr('data-gs-width', node.width)
859-
.attr('data-gs-height', node.height)
860-
.removeAttr('style');
916+
917+
if (node._isAboutToRemove) {
918+
forceNotify = true;
919+
el.removeData('_gridstack_node');
920+
el.remove();
921+
} else {
922+
clearRemovingTimeout();
923+
if (!node._temporaryRemoved) {
924+
o
925+
.attr('data-gs-x', node.x)
926+
.attr('data-gs-y', node.y)
927+
.attr('data-gs-width', node.width)
928+
.attr('data-gs-height', node.height)
929+
.removeAttr('style');
930+
} else {
931+
o
932+
.attr('data-gs-x', node._beforeDragX)
933+
.attr('data-gs-y', node._beforeDragY)
934+
.attr('data-gs-width', node.width)
935+
.attr('data-gs-height', node.height)
936+
.removeAttr('style');
937+
node.x = node._beforeDragX;
938+
node.y = node._beforeDragY;
939+
self.grid.addNode(node);
940+
}
941+
}
861942
self._updateContainerHeight();
862-
self._triggerChangeEvent();
943+
self._triggerChangeEvent(forceNotify);
863944

864945
self.grid.endUpdate();
865946

0 commit comments

Comments
 (0)