Skip to content

Commit 446dade

Browse files
trooleetroolee
committed
drag from sidebar/between grids
1 parent e31d50e commit 446dade

File tree

1 file changed

+137
-23
lines changed

1 file changed

+137
-23
lines changed

‎src/gridstack.js‎

Lines changed: 137 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -695,6 +695,114 @@
695695
self._clearRemovingTimeout(el);
696696
});
697697
}
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+
},
775+
drop: function(event, ui) {
776+
self.placeholder.detach();
777+
778+
var node = $(ui.draggable).data('_gridstack_node');
779+
node._grid = self;
780+
var el = $(ui.draggable).clone(false);
781+
el.data('_gridstack_node', node);
782+
$(ui.draggable).remove();
783+
node.el = el;
784+
self.placeholder.hide();
785+
el
786+
.attr('data-gs-x', node.x)
787+
.attr('data-gs-y', node.y)
788+
.attr('data-gs-width', node.width)
789+
.attr('data-gs-height', node.height)
790+
.addClass(self.opts.itemClass)
791+
.removeAttr('style')
792+
.enableSelection()
793+
.removeData('draggable')
794+
// .unbind('.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+
}
698806
};
699807

700808
GridStack.prototype._triggerChangeEvent = function(forceTrigger) {
@@ -856,30 +964,8 @@
856964
node._isAboutToRemove = false;
857965
};
858966

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

884970
var cellWidth;
885971
var cellHeight;
@@ -1035,6 +1121,34 @@
10351121
el.attr('data-gs-locked', node.locked ? 'yes' : null);
10361122
};
10371123

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

0 commit comments

Comments
 (0)