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

Merge pull request #200 from derekm/fix-out-of-order-events

Browse source 
fix ordering of draggable and resizable event callbacks
This commit is contained in:
Pavel Reznikov 2016-02-10 18:52:37 -08:00
parent 7a76830272 1fe90ee79b
commit 6017f346f8
1 changed files with 53 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

83
src/gridstack.js
View file

@ -635,6 +635,22 @@
var cell_width, cell_height;
var drag_or_resize = function(event, ui) {
var x = Math.round(ui.position.left / cell_width),
y = Math.floor((ui.position.top + cell_height / 2) / cell_height),
width, height;
if (event.type != "drag") {
width = Math.round(ui.size.width / cell_width);
height = Math.round(ui.size.height / cell_height);
}
if (!self.grid.can_move_node(node, x, y, width, height)) {
return;
}
self.grid.move_node(node, x, y, width, height);
self._update_container_height();
};
var on_start_moving = function(event, ui) {
self.container.append(self.placeholder);
var o = $(this);
@ -652,6 +668,10 @@
el.resizable('option', 'minWidth', Math.round(cell_width * (node.min_width || 1)));
el.resizable('option', 'minHeight', self.opts.cell_height * (node.min_height || 1));
if (event.type == 'resizestart') {
o.find('.grid-stack-item').trigger('resizestart');
}
};
var on_end_moving = function(event, ui) {
@ -669,36 +689,27 @@
self._trigger_change_event();
self.grid.end_update();
var nested_grids = o.find('.grid-stack');
if (nested_grids.length && event.type == 'resizestop') {
nested_grids.each(function(index, el) {
$(el).data('gridstack').on_resize_handler();
});
o.find('.grid-stack-item').trigger('resizestop');
}
};
el.draggable(_.extend(this.opts.draggable, {
start: on_start_moving,
stop: on_end_moving,
drag: function(event, ui) {
var x = Math.round(ui.position.left / cell_width),
y = Math.floor((ui.position.top + cell_height / 2) / cell_height);
if (!self.grid.can_move_node(node, x, y, node.width, node.height)) {
return;
}
self.grid.move_node(node, x, y);
self._update_container_height();
},
containment: this.opts.is_nested ? this.container.parent() : null
})).resizable(_.extend(this.opts.resizable, {
start: on_start_moving,
stop: on_end_moving,
resize: function(event, ui) {
var x = Math.round(ui.position.left / cell_width),
y = Math.floor((ui.position.top + cell_height / 2) / cell_height),
width = Math.round(ui.size.width / cell_width),
height = Math.round(ui.size.height / cell_height);
if (!self.grid.can_move_node(node, x, y, width, height)) {
return;
}
self.grid.move_node(node, x, y, width, height);
self._update_container_height();
}
}));
el
.draggable(_.extend(this.opts.draggable, {
containment: this.opts.is_nested ? this.container.parent() : null
}))
.on('dragstart', on_start_moving)
.on('dragstop', on_end_moving)
.on('drag', drag_or_resize)
.resizable(_.extend(this.opts.resizable, {}))
.on('resizestart', on_start_moving)
.on('resizestop', on_end_moving)
.on('resize', drag_or_resize);
if (node.no_move || this._is_one_column_mode()) {
el.draggable('disable');
@ -980,10 +991,22 @@
scope.GridStackUI.Utils = Utils;
function event_stop_propagate(event) {
event.stopPropagation();
}
$.fn.gridstack = function(opts) {
return this.each(function() {
if (!$(this).data('gridstack')) {
$(this).data('gridstack', new GridStack(this, opts));
var o = $(this);
if (!o.data('gridstack')) {
o
.data('gridstack', new GridStack(this, opts))
.on('dragstart', event_stop_propagate)
.on('dragstop', event_stop_propagate)
.on('drag', event_stop_propagate)
.on('resizestart', event_stop_propagate)
.on('resizestop', event_stop_propagate)
.on('resize', event_stop_propagate)
.on('change', event_stop_propagate);
}
});
};