Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit c413753

Browse files
trooleetroolee
committed
update demo
1 parent 948b65d commit c413753

File tree

4 files changed

+197
-34
lines changed

4 files changed

+197
-34
lines changed

‎demo/two.html

Lines changed: 46 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -48,13 +48,45 @@
4848
margin-bottom: 20px;
4949
background: rgba(255, 0, 0, 0.1) center center url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDQzOC41MjkgNDM4LjUyOSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDM4LjUyOSA0MzguNTI5OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTQxNy42ODksNzUuNjU0Yy0xLjcxMS0xLjcwOS0zLjkwMS0yLjU2OC02LjU2My0yLjU2OGgtODguMjI0TDMwMi45MTcsMjUuNDFjLTIuODU0LTcuMDQ0LTcuOTk0LTEzLjA0LTE1LjQxMy0xNy45ODkgICAgQzI4MC4wNzgsMi40NzMsMjcyLjU1NiwwLDI2NC45NDUsMGgtOTEuMzYzYy03LjYxMSwwLTE1LjEzMSwyLjQ3My0yMi41NTQsNy40MjFjLTcuNDI0LDQuOTQ5LTEyLjU2MywxMC45NDQtMTUuNDE5LDE3Ljk4OSAgICBsLTE5Ljk4NSw0Ny42NzZoLTg4LjIyYy0yLjY2NywwLTQuODUzLDAuODU5LTYuNTY3LDIuNTY4Yy0xLjcwOSwxLjcxMy0yLjU2OCwzLjkwMy0yLjU2OCw2LjU2N3YxOC4yNzQgICAgYzAsMi42NjQsMC44NTUsNC44NTQsMi41NjgsNi41NjRjMS43MTQsMS43MTIsMy45MDQsMi41NjgsNi41NjcsMi41NjhoMjcuNDA2djI3MS44YzAsMTUuODAzLDQuNDczLDI5LjI2NiwxMy40MTgsNDAuMzk4ICAgIGM4Ljk0NywxMS4xMzksMTkuNzAxLDE2LjcwMywzMi4yNjQsMTYuNzAzaDIzNy41NDJjMTIuNTY2LDAsMjMuMzE5LTUuNzU2LDMyLjI2NS0xNy4yNjhjOC45NDUtMTEuNTIsMTMuNDE1LTI1LjE3NCwxMy40MTUtNDAuOTcxICAgIFYxMDkuNjI3aDI3LjQxMWMyLjY2MiwwLDQuODUzLTAuODU2LDYuNTYzLTIuNTY4YzEuNzA4LTEuNzA5LDIuNTctMy45LDIuNTctNi41NjRWODIuMjIxICAgIEM0MjAuMjYsNzkuNTU3LDQxOS4zOTcsNzcuMzY3LDQxNy42ODksNzUuNjU0eiBNMTY5LjMwMSwzOS42NzhjMS4zMzEtMS43MTIsMi45NS0yLjc2Miw0Ljg1My0zLjE0aDkwLjUwNCAgICBjMS45MDMsMC4zODEsMy41MjUsMS40Myw0Ljg1NCwzLjE0bDEzLjcwOSwzMy40MDRIMTU1LjMxMUwxNjkuMzAxLDM5LjY3OHogTTM0Ny4xNzMsMzgwLjI5MWMwLDQuMTg2LTAuNjY0LDguMDQyLTEuOTk5LDExLjU2MSAgICBjLTEuMzM0LDMuNTE4LTIuNzE3LDYuMDg4LTQuMTQxLDcuNzA2Yy0xLjQzMSwxLjYyMi0yLjQyMywyLjQyNy0yLjk5OCwyLjQyN0gxMDAuNDkzYy0wLjU3MSwwLTEuNTY1LTAuODA1LTIuOTk2LTIuNDI3ICAgIGMtMS40MjktMS42MTgtMi44MS00LjE4OC00LjE0My03LjcwNmMtMS4zMzEtMy41MTktMS45OTctNy4zNzktMS45OTctMTEuNTYxVjEwOS42MjdoMjU1LjgxNVYzODAuMjkxeiIgZmlsbD0iI2ZmOWNhZSIvPgoJCTxwYXRoIGQ9Ik0xMzcuMDQsMzQ3LjE3MmgxOC4yNzFjMi42NjcsMCw0Ljg1OC0wLjg1NSw2LjU2Ny0yLjU2N2MxLjcwOS0xLjcxOCwyLjU2OC0zLjkwMSwyLjU2OC02LjU3VjE3My41ODEgICAgYzAtMi42NjMtMC44NTktNC44NTMtMi41NjgtNi41NjdjLTEuNzE0LTEuNzA5LTMuODk5LTIuNTY1LTYuNTY3LTIuNTY1SDEzNy4wNGMtMi42NjcsMC00Ljg1NCwwLjg1NS02LjU2NywyLjU2NSAgICBjLTEuNzExLDEuNzE0LTIuNTY4LDMuOTA0LTIuNTY4LDYuNTY3djE2NC40NTRjMCwyLjY2OSwwLjg1NCw0Ljg1MywyLjU2OCw2LjU3QzEzMi4xODYsMzQ2LjMxNiwxMzQuMzczLDM0Ny4xNzIsMTM3LjA0LDM0Ny4xNzJ6IiBmaWxsPSIjZmY5Y2FlIi8+CgkJPHBhdGggZD0iTTIxMC4xMjksMzQ3LjE3MmgxOC4yNzFjMi42NjYsMCw0Ljg1Ni0wLjg1NSw2LjU2NC0yLjU2N2MxLjcxOC0xLjcxOCwyLjU2OS0zLjkwMSwyLjU2OS02LjU3VjE3My41ODEgICAgYzAtMi42NjMtMC44NTItNC44NTMtMi41NjktNi41NjdjLTEuNzA4LTEuNzA5LTMuODk4LTIuNTY1LTYuNTY0LTIuNTY1aC0xOC4yNzFjLTIuNjY0LDAtNC44NTQsMC44NTUtNi41NjcsMi41NjUgICAgYy0xLjcxNCwxLjcxNC0yLjU2OCwzLjkwNC0yLjU2OCw2LjU2N3YxNjQuNDU0YzAsMi42NjksMC44NTQsNC44NTMsMi41NjgsNi41N0MyMDUuMjc0LDM0Ni4zMTYsMjA3LjQ2NSwzNDcuMTcyLDIxMC4xMjksMzQ3LjE3MnogICAgIiBmaWxsPSIjZmY5Y2FlIi8+CgkJPHBhdGggZD0iTTI4My4yMiwzNDcuMTcyaDE4LjI2OGMyLjY2OSwwLDQuODU5LTAuODU1LDYuNTctMi41NjdjMS43MTEtMS43MTgsMi41NjItMy45MDEsMi41NjItNi41N1YxNzMuNTgxICAgIGMwLTIuNjYzLTAuODUyLTQuODUzLTIuNTYyLTYuNTY3Yy0xLjcxMS0xLjcwOS0zLjkwMS0yLjU2NS02LjU3LTIuNTY1SDI4My4yMmMtMi42NywwLTQuODUzLDAuODU1LTYuNTcxLDIuNTY1ICAgIGMtMS43MTEsMS43MTQtMi41NjYsMy45MDQtMi41NjYsNi41Njd2MTY0LjQ1NGMwLDIuNjY5LDAuODU1LDQuODUzLDIuNTY2LDYuNTdDMjc4LjM2NywzNDYuMzE2LDI4MC41NSwzNDcuMTcyLDI4My4yMiwzNDcuMTcyeiIgZmlsbD0iI2ZmOWNhZSIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=) no-repeat;
5050
}
51+
52+
.sidebar {
53+
background: rgba(0, 255, 0, 0.1);
54+
height: 150px;
55+
padding: 25px 0;
56+
text-align: center;
57+
}
58+
59+
.sidebar .grid-stack-item {
60+
width: 200px;
61+
height: 100px;
62+
border: 2px dashed green;
63+
text-align: center;
64+
line-height: 100px;
65+
z-index: 10;
66+
background: rgba(0, 255, 0, 0.1);
67+
cursor: default;
68+
display: inline-block;
69+
}
70+
71+
.sidebar .grid-stack-item .grid-stack-item-content {
72+
background: none;
73+
}
5174
</style>
5275
</head>
5376
<body>
5477
<div class="container-fluid">
5578
<h1>Two grids demo</h1>
5679

57-
<div class="trash">
80+
<div class="row">
81+
<div class="col-md-3">
82+
<div class="sidebar">
83+
<div class="grid-stack-item"><div class="grid-stack-item-content">Drag me</div></div>
84+
</div>
85+
</div>
86+
<div class="col-md-9">
87+
<div class="trash">
88+
</div>
89+
</div>
5890
</div>
5991

6092
<div class="row">
@@ -74,12 +106,15 @@ <h1>Two grids demo</h1>
74106
$(function () {
75107
var options = {
76108
width: 6,
77-
float: true,
109+
float: false,
78110
removable: '.trash',
79-
removeTimeout: 100
111+
removeTimeout: 100,
112+
acceptWidgets: '.grid-stack-item'
80113
};
81114
$('#grid1').gridstack(options);
82-
$('#grid2').gridstack(options);
115+
$('#grid2').gridstack(_.defaults({
116+
float: true
117+
}, options));
83118

84119
var items = [
85120
{x: 0, y: 0, width: 2, height: 2},
@@ -97,6 +132,13 @@ <h1>Two grids demo</h1>
97132
node.x, node.y, node.width, node.height);
98133
}, this);
99134
});
135+
136+
$('.sidebar .grid-stack-item').draggable({
137+
revert: 'invalid',
138+
handle: '.grid-stack-item-content',
139+
scroll: false,
140+
appendTo: 'body'
141+
});
100142
});
101143
</script>
102144
</body>

‎dist/gridstack.js

Lines changed: 148 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -576,7 +576,9 @@
576576
var maxHeight = 0;
577577
_.each(nodes, function(n) {
578578
if (n._id === null) {
579-
n.el.remove();
579+
if (n.el) {
580+
n.el.remove();
581+
}
580582
} else {
581583
n.el
582584
.attr('data-gs-x', n.x)
@@ -671,7 +673,9 @@
671673
if (typeof self.opts.removable === 'string') {
672674
var trashZone = $(self.opts.removable);
673675
if (!trashZone.data('droppable')) {
674-
trashZone.droppable({});
676+
trashZone.droppable({
677+
accept: '.' + self.opts.itemClass
678+
});
675679
}
676680
trashZone
677681
.on('dropover', function(event, ui) {
@@ -691,6 +695,114 @@
691695
self._clearRemovingTimeout(el);
692696
});
693697
}
698+
699+
if (self.opts.acceptWidgets) {
700+
var draggingElement = null;
701+
702+
var onDrag = function(event, ui) {
703+
var el = draggingElement;
704+
var node = el.data('_gridstack_node');
705+
var pos = self.getCellFromPixel(ui.offset, true);
706+
var x = Math.max(0, pos.x);
707+
var y = Math.max(0, pos.y);
708+
if (!node._added) {
709+
node._added = true;
710+
711+
node.el = el;
712+
node.x = x;
713+
node.y = y;
714+
self.grid.cleanNodes();
715+
self.grid.beginUpdate(node);
716+
self.grid.addNode(node);
717+
718+
self.container.append(self.placeholder);
719+
self.placeholder
720+
.attr('data-gs-x', node.x)
721+
.attr('data-gs-y', node.y)
722+
.attr('data-gs-width', node.width)
723+
.attr('data-gs-height', node.height)
724+
.show();
725+
node.el = self.placeholder;
726+
node._beforeDragX = node.x;
727+
node._beforeDragY = node.y;
728+
729+
self._updateContainerHeight();
730+
} else {
731+
if (!self.grid.canMoveNode(node, x, y)) {
732+
return;
733+
}
734+
self.grid.moveNode(node, x, y);
735+
self._updateContainerHeight();
736+
}
737+
};
738+
739+
$(self.container).droppable({
740+
accept: function(el) {
741+
el = $(el);
742+
var node = el.data('_gridstack_node');
743+
if (node && node._grid === self) {
744+
return false;
745+
}
746+
return el.is(self.opts.acceptWidgets === true ? '.grid-stack-item' : self.opts.acceptWidgets);
747+
},
748+
over: function(event, ui) {
749+
var offset = self.container.offset();
750+
var el = $(ui.draggable);
751+
var cellWidth = self.cellWidth();
752+
var cellHeight = self.cellHeight();
753+
var origNode = el.data('_gridstack_node');
754+
755+
var width = origNode ? origNode.width : (Math.ceil(el.outerWidth() / cellWidth));
756+
var height = origNode ? origNode.height : (Math.ceil(el.outerHeight() / cellHeight));
757+
758+
draggingElement = el;
759+
760+
var node = self.grid._prepareNode({width: width, height: height, _added: false, _temporary: true});
761+
el.data('_gridstack_node', node);
762+
el.data('_gridstack_node_orig', origNode);
763+
764+
el.on('drag', onDrag);
765+
},
766+
out: function(event, ui) {
767+
var el = $(ui.draggable);
768+
el.unbind('drag', onDrag);
769+
var node = el.data('_gridstack_node');
770+
node.el = null;
771+
self.grid.removeNode(node);
772+
self.placeholder.detach();
773+
self._updateContainerHeight();
774+
el.data('_gridstack_node', el.data('_gridstack_node_orig'));
775+
},
776+
drop: function(event, ui) {
777+
self.placeholder.detach();
778+
779+
var node = $(ui.draggable).data('_gridstack_node');
780+
node._grid = self;
781+
var el = $(ui.draggable).clone(false);
782+
el.data('_gridstack_node', node);
783+
$(ui.draggable).remove();
784+
node.el = el;
785+
self.placeholder.hide();
786+
el
787+
.attr('data-gs-x', node.x)
788+
.attr('data-gs-y', node.y)
789+
.attr('data-gs-width', node.width)
790+
.attr('data-gs-height', node.height)
791+
.addClass(self.opts.itemClass)
792+
.removeAttr('style')
793+
.enableSelection()
794+
.removeData('draggable')
795+
.removeClass('ui-draggable ui-draggable-dragging ui-draggable-disabled')
796+
.unbind('drag', onDrag);
797+
self.container.append(el);
798+
self._prepareElementByNode(el, node);
799+
self._updateContainerHeight();
800+
self._triggerChangeEvent();
801+
802+
self.grid.endUpdate();
803+
}
804+
});
805+
}
694806
};
695807

696808
GridStack.prototype._triggerChangeEvent = function(forceTrigger) {
@@ -840,7 +952,6 @@
840952
};
841953

842954
GridStack.prototype._clearRemovingTimeout = function(el) {
843-
var self = this;
844955
var node = $(el).data('_gridstack_node');
845956

846957
if (!node._removeTimeout) {
@@ -852,30 +963,8 @@
852963
node._isAboutToRemove = false;
853964
};
854965

855-
GridStack.prototype._prepareElement = function(el, triggerAddEvent) {
856-
triggerAddEvent = typeof triggerAddEvent != 'undefined' ? triggerAddEvent : false;
966+
GridStack.prototype._prepareElementByNode = function(el, node) {
857967
var self = this;
858-
el = $(el);
859-
860-
el.addClass(this.opts.itemClass);
861-
var node = self.grid.addNode({
862-
x: el.attr('data-gs-x'),
863-
y: el.attr('data-gs-y'),
864-
width: el.attr('data-gs-width'),
865-
height: el.attr('data-gs-height'),
866-
maxWidth: el.attr('data-gs-max-width'),
867-
minWidth: el.attr('data-gs-min-width'),
868-
maxHeight: el.attr('data-gs-max-height'),
869-
minHeight: el.attr('data-gs-min-height'),
870-
autoPosition: Utils.toBool(el.attr('data-gs-auto-position')),
871-
noResize: Utils.toBool(el.attr('data-gs-no-resize')),
872-
noMove: Utils.toBool(el.attr('data-gs-no-move')),
873-
locked: Utils.toBool(el.attr('data-gs-locked')),
874-
el: el,
875-
id: el.attr('data-gs-id'),
876-
_grid: self
877-
}, triggerAddEvent);
878-
el.data('_gridstack_node', node);
879968

880969
var cellWidth;
881970
var cellHeight;
@@ -962,9 +1051,13 @@
9621051
};
9631052

9641053
var onEndMoving = function(event, ui) {
1054+
var o = $(this);
1055+
if (!o.data('_gridstack_node')) {
1056+
return;
1057+
}
1058+
9651059
var forceNotify = false;
9661060
self.placeholder.detach();
967-
var o = $(this);
9681061
node.el = o;
9691062
self.placeholder.hide();
9701063

@@ -1031,6 +1124,34 @@
10311124
el.attr('data-gs-locked', node.locked ? 'yes' : null);
10321125
};
10331126

1127+
GridStack.prototype._prepareElement = function(el, triggerAddEvent) {
1128+
triggerAddEvent = typeof triggerAddEvent != 'undefined' ? triggerAddEvent : false;
1129+
var self = this;
1130+
el = $(el);
1131+
1132+
el.addClass(this.opts.itemClass);
1133+
var node = self.grid.addNode({
1134+
x: el.attr('data-gs-x'),
1135+
y: el.attr('data-gs-y'),
1136+
width: el.attr('data-gs-width'),
1137+
height: el.attr('data-gs-height'),
1138+
maxWidth: el.attr('data-gs-max-width'),
1139+
minWidth: el.attr('data-gs-min-width'),
1140+
maxHeight: el.attr('data-gs-max-height'),
1141+
minHeight: el.attr('data-gs-min-height'),
1142+
autoPosition: Utils.toBool(el.attr('data-gs-auto-position')),
1143+
noResize: Utils.toBool(el.attr('data-gs-no-resize')),
1144+
noMove: Utils.toBool(el.attr('data-gs-no-move')),
1145+
locked: Utils.toBool(el.attr('data-gs-locked')),
1146+
el: el,
1147+
id: el.attr('data-gs-id'),
1148+
_grid: self
1149+
}, triggerAddEvent);
1150+
el.data('_gridstack_node', node);
1151+
1152+
this._prepareElementByNode(el, node);
1153+
};
1154+
10341155
GridStack.prototype.setAnimation = function(enable) {
10351156
if (enable) {
10361157
this.container.addClass('grid-stack-animate');

0 commit comments

Comments
 (0)