Added ability to specify scroll container for drag/resize

This commit is contained in:
Chris Rock
2014-11-18 11:39:51 -05:00
parent 314037471f
commit 41ad5c9bd6
8 changed files with 164 additions and 95 deletions
+1 -1
View File
@@ -1,4 +1,4 @@
/*! gridster.js - v0.5.6 - 2014-09-25
/*! gridster.js - v0.5.6 - 2014-11-18
* http://gridster.net/
* Copyright (c) 2014 ducksboard; Licensed MIT */
+53 -30
View File
@@ -1,4 +1,4 @@
/*! gridster.js - v0.5.6 - 2014-09-25
/*! gridster.js - v0.5.6 - 2014-11-18
* http://gridster.net/
* Copyright (c) 2014 ducksboard; Licensed MIT */
@@ -466,7 +466,7 @@
var idCounter = 0;
var uniqId = function() {
return ++idCounter + '';
}
};
/**
* Basic drag implementation for DOM elements inside a container.
@@ -498,15 +498,17 @@
* @constructor
*/
function Draggable(el, options) {
this.options = $.extend({}, defaults, options);
this.$document = $(document);
this.$container = $(el);
this.$dragitems = $(this.options.items, this.$container);
this.is_dragging = false;
this.player_min_left = 0 + this.options.offset_left;
this.id = uniqId();
this.ns = '.gridster-draggable-' + this.id;
this.init();
this.options = $.extend({}, defaults, options);
this.$document = $(document);
this.$container = $(el);
this.$scroll_container = this.options.scroll_container == window ?
$(window) : this.$container.closest(this.options.scroll_container);
this.$dragitems = $(this.options.items, this.$container);
this.is_dragging = false;
this.player_min_left = 0 + this.options.offset_left;
this.id = uniqId();
this.ns = '.gridster-draggable-' + this.id;
this.init();
}
Draggable.defaults = defaults;
@@ -578,9 +580,13 @@
var diff_y = Math.round(mouse_actual_pos.top - this.mouse_init_pos.top);
var left = Math.round(this.el_init_offset.left +
diff_x - this.baseX + $(window).scrollLeft() - this.win_offset_x);
diff_x - this.baseX +
this.$scroll_container.scrollLeft() -
this.scroll_container_offset_x);
var top = Math.round(this.el_init_offset.top +
diff_y - this.baseY + $(window).scrollTop() - this.win_offset_y);
diff_y - this.baseY +
this.$scroll_container.scrollTop() -
this.scroll_container_offset_y);
if (this.options.limit) {
if (left > this.player_max_left) {
@@ -598,8 +604,10 @@
pointer: {
left: mouse_actual_pos.left,
top: mouse_actual_pos.top,
diff_left: diff_x + ($(window).scrollLeft() - this.win_offset_x),
diff_top: diff_y + ($(window).scrollTop() - this.win_offset_y)
diff_left: diff_x + (this.$scroll_container.scrollLeft() -
this.scroll_container_offset_x),
diff_top: diff_y + (this.$scroll_container.scrollTop() -
this.scroll_container_offset_y)
}
};
};
@@ -630,28 +638,36 @@
var area_size = 50;
var scroll_inc = 30;
var scrollDir = 'scroll' + capitalize(dir_prop);
var is_x = axis === 'x';
var window_size = is_x ? this.window_width : this.window_height;
var doc_size = is_x ? $(document).width() : $(document).height();
var scroller_size = is_x ? this.scroller_width : this.scroller_height;
var doc_size;
if (this.$scroll_container == window){
doc_size = is_x ? this.$scroll_container.width() :
this.$scroll_container.height();
}else{
doc_size = is_x ? this.$scroll_container[0].scrollWidth :
this.$scroll_container[0].scrollHeight;
}
var player_size = is_x ? this.$player.width() : this.$player.height();
var next_scroll;
var scroll_offset = $window['scroll' + capitalize(dir_prop)]();
var min_window_pos = scroll_offset;
var max_window_pos = min_window_pos + window_size;
var scroll_offset = this.$scroll_container[scrollDir]();
var min_scroll_pos = scroll_offset;
var max_scroll_pos = min_scroll_pos + scroller_size;
var mouse_next_zone = max_window_pos - area_size; // down/right
var mouse_prev_zone = min_window_pos + area_size; // up/left
var mouse_next_zone = max_scroll_pos - area_size; // down/right
var mouse_prev_zone = min_scroll_pos + area_size; // up/left
var abs_mouse_pos = min_window_pos + data.pointer[dir_prop];
var abs_mouse_pos = min_scroll_pos + data.pointer[dir_prop];
var max_player_pos = (doc_size - window_size + player_size);
var max_player_pos = (doc_size - scroller_size + player_size);
if (abs_mouse_pos >= mouse_next_zone) {
next_scroll = scroll_offset + scroll_inc;
if (next_scroll < max_player_pos) {
$window['scroll' + capitalize(dir_prop)](next_scroll);
this.$scroll_container[scrollDir](next_scroll);
this['scroll_offset_' + axis] += scroll_inc;
}
}
@@ -659,7 +675,7 @@
if (abs_mouse_pos <= mouse_prev_zone) {
next_scroll = scroll_offset - scroll_inc;
if (next_scroll > 0) {
$window['scroll' + capitalize(dir_prop)](next_scroll);
this.$scroll_container[scrollDir](next_scroll);
this['scroll_offset_' + axis] -= scroll_inc;
}
}
@@ -675,8 +691,8 @@
fn.calculate_dimensions = function(e) {
this.window_height = $window.height();
this.window_width = $window.width();
this.scroller_height = this.$scroll_container.height();
this.scroller_width = this.$scroll_container.width();
};
@@ -747,8 +763,8 @@
this.helper = false;
}
this.win_offset_y = $(window).scrollTop();
this.win_offset_x = $(window).scrollLeft();
this.scroll_container_offset_y = this.$scroll_container.scrollTop();
this.scroll_container_offset_x = this.$scroll_container.scrollLeft();
this.scroll_offset_y = 0;
this.scroll_offset_x = 0;
this.el_init_offset = this.$player.offset();
@@ -879,6 +895,7 @@
autogenerate_stylesheet: true,
avoid_overlapped_widgets: true,
auto_init: true,
scroll_container: window,
serialize_params: function($w, wgd) {
return {
col: wgd.col,
@@ -979,7 +996,12 @@
*/
function Gridster(el, options) {
this.options = $.extend(true, {}, defaults, options);
this.options.draggable = this.options.draggable || {};
this.options.draggable = $.extend(true, {}, this.options.draggable,
{scroll_container: this.options.scroll_container});
this.$el = $(el);
this.$scroll_container = this.options.scroll_container == window ?
$(window) : this.$el.closest(this.options.scroll_container);
this.$wrapper = this.$el.parent();
this.$widgets = this.$el.children(
this.options.widget_selector).addClass('gs-w');
@@ -1837,6 +1859,7 @@
move_element: false,
resize: true,
limit: this.options.autogrow_cols ? false : true,
scroll_container: this.options.scroll_container,
start: $.proxy(this.on_start_resize, this),
stop: $.proxy(function(event, ui) {
delay($.proxy(function() {
+1 -1
View File
@@ -1,2 +1,2 @@
/*! gridster.js - v0.5.6 - 2014-09-25 - * http://gridster.net/ - Copyright (c) 2014 ducksboard; Licensed MIT */
/*! gridster.js - v0.5.6 - 2014-11-18 - * http://gridster.net/ - Copyright (c) 2014 ducksboard; Licensed MIT */
.gridster{position:relative}.gridster>*{margin:0 auto;-webkit-transition:height .4s,width .4s;-moz-transition:height .4s,width .4s;-o-transition:height .4s,width .4s;-ms-transition:height .4s,width .4s;transition:height .4s,width .4s}.gridster .gs-w{z-index:2;position:absolute}.ready .gs-w:not(.preview-holder){-webkit-transition:opacity .3s,left .3s,top .3s;-moz-transition:opacity .3s,left .3s,top .3s;-o-transition:opacity .3s,left .3s,top .3s;transition:opacity .3s,left .3s,top .3s}.ready .gs-w:not(.preview-holder),.ready .resize-preview-holder{-webkit-transition:opacity .3s,left .3s,top .3s,width .3s,height .3s;-moz-transition:opacity .3s,left .3s,top .3s,width .3s,height .3s;-o-transition:opacity .3s,left .3s,top .3s,width .3s,height .3s;transition:opacity .3s,left .3s,top .3s,width .3s,height .3s}.gridster .preview-holder{z-index:1;position:absolute;background-color:#fff;border-color:#fff;opacity:.3}.gridster .player-revert{z-index:10!important;-webkit-transition:left .3s,top .3s!important;-moz-transition:left .3s,top .3s!important;-o-transition:left .3s,top .3s!important;transition:left .3s,top .3s!important}.gridster .dragging,.gridster .resizing{z-index:10!important;-webkit-transition:all 0s!important;-moz-transition:all 0s!important;-o-transition:all 0s!important;transition:all 0s!important}.gs-resize-handle{position:absolute;z-index:1}.gs-resize-handle-both{width:20px;height:20px;bottom:-8px;right:-8px;background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pg08IS0tIEdlbmVyYXRvcjogQWRvYmUgRmlyZXdvcmtzIENTNiwgRXhwb3J0IFNWRyBFeHRlbnNpb24gYnkgQWFyb24gQmVhbGwgKGh0dHA6Ly9maXJld29ya3MuYWJlYWxsLmNvbSkgLiBWZXJzaW9uOiAwLjYuMSAgLS0+DTwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DTxzdmcgaWQ9IlVudGl0bGVkLVBhZ2UlMjAxIiB2aWV3Qm94PSIwIDAgNiA2IiBzdHlsZT0iYmFja2dyb3VuZC1jb2xvcjojZmZmZmZmMDAiIHZlcnNpb249IjEuMSINCXhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiDQl4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjZweCIgaGVpZ2h0PSI2cHgiDT4NCTxnIG9wYWNpdHk9IjAuMzAyIj4NCQk8cGF0aCBkPSJNIDYgNiBMIDAgNiBMIDAgNC4yIEwgNCA0LjIgTCA0LjIgNC4yIEwgNC4yIDAgTCA2IDAgTCA2IDYgTCA2IDYgWiIgZmlsbD0iIzAwMDAwMCIvPg0JPC9nPg08L3N2Zz4=);background-position:top left;background-repeat:no-repeat;cursor:se-resize;z-index:20}.gs-resize-handle-x{top:0;bottom:13px;right:-5px;width:10px;cursor:e-resize}.gs-resize-handle-y{left:0;right:13px;bottom:-5px;height:10px;cursor:s-resize}.gs-w:hover .gs-resize-handle,.resizing .gs-resize-handle{opacity:1}.gs-resize-handle,.gs-w.dragging .gs-resize-handle{opacity:0}.gs-resize-disabled .gs-resize-handle{display:none!important}[data-max-sizex="1"] .gs-resize-handle-x,[data-max-sizey="1"] .gs-resize-handle-y,[data-max-sizey="1"][data-max-sizex="1"] .gs-resize-handle{display:none!important}
+2 -2
View File
File diff suppressed because one or more lines are too long
+53 -30
View File
@@ -1,4 +1,4 @@
/*! gridster.js - v0.5.6 - 2014-09-25
/*! gridster.js - v0.5.6 - 2014-11-18
* http://gridster.net/
* Copyright (c) 2014 ducksboard; Licensed MIT */
@@ -466,7 +466,7 @@
var idCounter = 0;
var uniqId = function() {
return ++idCounter + '';
}
};
/**
* Basic drag implementation for DOM elements inside a container.
@@ -498,15 +498,17 @@
* @constructor
*/
function Draggable(el, options) {
this.options = $.extend({}, defaults, options);
this.$document = $(document);
this.$container = $(el);
this.$dragitems = $(this.options.items, this.$container);
this.is_dragging = false;
this.player_min_left = 0 + this.options.offset_left;
this.id = uniqId();
this.ns = '.gridster-draggable-' + this.id;
this.init();
this.options = $.extend({}, defaults, options);
this.$document = $(document);
this.$container = $(el);
this.$scroll_container = this.options.scroll_container == window ?
$(window) : this.$container.closest(this.options.scroll_container);
this.$dragitems = $(this.options.items, this.$container);
this.is_dragging = false;
this.player_min_left = 0 + this.options.offset_left;
this.id = uniqId();
this.ns = '.gridster-draggable-' + this.id;
this.init();
}
Draggable.defaults = defaults;
@@ -578,9 +580,13 @@
var diff_y = Math.round(mouse_actual_pos.top - this.mouse_init_pos.top);
var left = Math.round(this.el_init_offset.left +
diff_x - this.baseX + $(window).scrollLeft() - this.win_offset_x);
diff_x - this.baseX +
this.$scroll_container.scrollLeft() -
this.scroll_container_offset_x);
var top = Math.round(this.el_init_offset.top +
diff_y - this.baseY + $(window).scrollTop() - this.win_offset_y);
diff_y - this.baseY +
this.$scroll_container.scrollTop() -
this.scroll_container_offset_y);
if (this.options.limit) {
if (left > this.player_max_left) {
@@ -598,8 +604,10 @@
pointer: {
left: mouse_actual_pos.left,
top: mouse_actual_pos.top,
diff_left: diff_x + ($(window).scrollLeft() - this.win_offset_x),
diff_top: diff_y + ($(window).scrollTop() - this.win_offset_y)
diff_left: diff_x + (this.$scroll_container.scrollLeft() -
this.scroll_container_offset_x),
diff_top: diff_y + (this.$scroll_container.scrollTop() -
this.scroll_container_offset_y)
}
};
};
@@ -630,28 +638,36 @@
var area_size = 50;
var scroll_inc = 30;
var scrollDir = 'scroll' + capitalize(dir_prop);
var is_x = axis === 'x';
var window_size = is_x ? this.window_width : this.window_height;
var doc_size = is_x ? $(document).width() : $(document).height();
var scroller_size = is_x ? this.scroller_width : this.scroller_height;
var doc_size;
if (this.$scroll_container == window){
doc_size = is_x ? this.$scroll_container.width() :
this.$scroll_container.height();
}else{
doc_size = is_x ? this.$scroll_container[0].scrollWidth :
this.$scroll_container[0].scrollHeight;
}
var player_size = is_x ? this.$player.width() : this.$player.height();
var next_scroll;
var scroll_offset = $window['scroll' + capitalize(dir_prop)]();
var min_window_pos = scroll_offset;
var max_window_pos = min_window_pos + window_size;
var scroll_offset = this.$scroll_container[scrollDir]();
var min_scroll_pos = scroll_offset;
var max_scroll_pos = min_scroll_pos + scroller_size;
var mouse_next_zone = max_window_pos - area_size; // down/right
var mouse_prev_zone = min_window_pos + area_size; // up/left
var mouse_next_zone = max_scroll_pos - area_size; // down/right
var mouse_prev_zone = min_scroll_pos + area_size; // up/left
var abs_mouse_pos = min_window_pos + data.pointer[dir_prop];
var abs_mouse_pos = min_scroll_pos + data.pointer[dir_prop];
var max_player_pos = (doc_size - window_size + player_size);
var max_player_pos = (doc_size - scroller_size + player_size);
if (abs_mouse_pos >= mouse_next_zone) {
next_scroll = scroll_offset + scroll_inc;
if (next_scroll < max_player_pos) {
$window['scroll' + capitalize(dir_prop)](next_scroll);
this.$scroll_container[scrollDir](next_scroll);
this['scroll_offset_' + axis] += scroll_inc;
}
}
@@ -659,7 +675,7 @@
if (abs_mouse_pos <= mouse_prev_zone) {
next_scroll = scroll_offset - scroll_inc;
if (next_scroll > 0) {
$window['scroll' + capitalize(dir_prop)](next_scroll);
this.$scroll_container[scrollDir](next_scroll);
this['scroll_offset_' + axis] -= scroll_inc;
}
}
@@ -675,8 +691,8 @@
fn.calculate_dimensions = function(e) {
this.window_height = $window.height();
this.window_width = $window.width();
this.scroller_height = this.$scroll_container.height();
this.scroller_width = this.$scroll_container.width();
};
@@ -747,8 +763,8 @@
this.helper = false;
}
this.win_offset_y = $(window).scrollTop();
this.win_offset_x = $(window).scrollLeft();
this.scroll_container_offset_y = this.$scroll_container.scrollTop();
this.scroll_container_offset_x = this.$scroll_container.scrollLeft();
this.scroll_offset_y = 0;
this.scroll_offset_x = 0;
this.el_init_offset = this.$player.offset();
@@ -879,6 +895,7 @@
autogenerate_stylesheet: true,
avoid_overlapped_widgets: true,
auto_init: true,
scroll_container: window,
serialize_params: function($w, wgd) {
return {
col: wgd.col,
@@ -979,7 +996,12 @@
*/
function Gridster(el, options) {
this.options = $.extend(true, {}, defaults, options);
this.options.draggable = this.options.draggable || {};
this.options.draggable = $.extend(true, {}, this.options.draggable,
{scroll_container: this.options.scroll_container});
this.$el = $(el);
this.$scroll_container = this.options.scroll_container == window ?
$(window) : this.$el.closest(this.options.scroll_container);
this.$wrapper = this.$el.parent();
this.$widgets = this.$el.children(
this.options.widget_selector).addClass('gs-w');
@@ -1837,6 +1859,7 @@
move_element: false,
resize: true,
limit: this.options.autogrow_cols ? false : true,
scroll_container: this.options.scroll_container,
start: $.proxy(this.on_start_resize, this),
stop: $.proxy(function(event, ui) {
delay($.proxy(function() {
File diff suppressed because one or more lines are too long
+45 -29
View File
@@ -44,7 +44,7 @@
var idCounter = 0;
var uniqId = function() {
return ++idCounter + '';
}
};
/**
* Basic drag implementation for DOM elements inside a container.
@@ -76,15 +76,17 @@
* @constructor
*/
function Draggable(el, options) {
this.options = $.extend({}, defaults, options);
this.$document = $(document);
this.$container = $(el);
this.$dragitems = $(this.options.items, this.$container);
this.is_dragging = false;
this.player_min_left = 0 + this.options.offset_left;
this.id = uniqId();
this.ns = '.gridster-draggable-' + this.id;
this.init();
this.options = $.extend({}, defaults, options);
this.$document = $(document);
this.$container = $(el);
this.$scroll_container = this.options.scroll_container == window ?
$(window) : this.$container.closest(this.options.scroll_container);
this.$dragitems = $(this.options.items, this.$container);
this.is_dragging = false;
this.player_min_left = 0 + this.options.offset_left;
this.id = uniqId();
this.ns = '.gridster-draggable-' + this.id;
this.init();
}
Draggable.defaults = defaults;
@@ -156,9 +158,13 @@
var diff_y = Math.round(mouse_actual_pos.top - this.mouse_init_pos.top);
var left = Math.round(this.el_init_offset.left +
diff_x - this.baseX + $(window).scrollLeft() - this.win_offset_x);
diff_x - this.baseX +
this.$scroll_container.scrollLeft() -
this.scroll_container_offset_x);
var top = Math.round(this.el_init_offset.top +
diff_y - this.baseY + $(window).scrollTop() - this.win_offset_y);
diff_y - this.baseY +
this.$scroll_container.scrollTop() -
this.scroll_container_offset_y);
if (this.options.limit) {
if (left > this.player_max_left) {
@@ -176,8 +182,10 @@
pointer: {
left: mouse_actual_pos.left,
top: mouse_actual_pos.top,
diff_left: diff_x + ($(window).scrollLeft() - this.win_offset_x),
diff_top: diff_y + ($(window).scrollTop() - this.win_offset_y)
diff_left: diff_x + (this.$scroll_container.scrollLeft() -
this.scroll_container_offset_x),
diff_top: diff_y + (this.$scroll_container.scrollTop() -
this.scroll_container_offset_y)
}
};
};
@@ -208,28 +216,36 @@
var area_size = 50;
var scroll_inc = 30;
var scrollDir = 'scroll' + capitalize(dir_prop);
var is_x = axis === 'x';
var window_size = is_x ? this.window_width : this.window_height;
var doc_size = is_x ? $(document).width() : $(document).height();
var scroller_size = is_x ? this.scroller_width : this.scroller_height;
var doc_size;
if (this.$scroll_container == window){
doc_size = is_x ? this.$scroll_container.width() :
this.$scroll_container.height();
}else{
doc_size = is_x ? this.$scroll_container[0].scrollWidth :
this.$scroll_container[0].scrollHeight;
}
var player_size = is_x ? this.$player.width() : this.$player.height();
var next_scroll;
var scroll_offset = $window['scroll' + capitalize(dir_prop)]();
var min_window_pos = scroll_offset;
var max_window_pos = min_window_pos + window_size;
var scroll_offset = this.$scroll_container[scrollDir]();
var min_scroll_pos = scroll_offset;
var max_scroll_pos = min_scroll_pos + scroller_size;
var mouse_next_zone = max_window_pos - area_size; // down/right
var mouse_prev_zone = min_window_pos + area_size; // up/left
var mouse_next_zone = max_scroll_pos - area_size; // down/right
var mouse_prev_zone = min_scroll_pos + area_size; // up/left
var abs_mouse_pos = min_window_pos + data.pointer[dir_prop];
var abs_mouse_pos = min_scroll_pos + data.pointer[dir_prop];
var max_player_pos = (doc_size - window_size + player_size);
var max_player_pos = (doc_size - scroller_size + player_size);
if (abs_mouse_pos >= mouse_next_zone) {
next_scroll = scroll_offset + scroll_inc;
if (next_scroll < max_player_pos) {
$window['scroll' + capitalize(dir_prop)](next_scroll);
this.$scroll_container[scrollDir](next_scroll);
this['scroll_offset_' + axis] += scroll_inc;
}
}
@@ -237,7 +253,7 @@
if (abs_mouse_pos <= mouse_prev_zone) {
next_scroll = scroll_offset - scroll_inc;
if (next_scroll > 0) {
$window['scroll' + capitalize(dir_prop)](next_scroll);
this.$scroll_container[scrollDir](next_scroll);
this['scroll_offset_' + axis] -= scroll_inc;
}
}
@@ -253,8 +269,8 @@
fn.calculate_dimensions = function(e) {
this.window_height = $window.height();
this.window_width = $window.width();
this.scroller_height = this.$scroll_container.height();
this.scroller_width = this.$scroll_container.width();
};
@@ -325,8 +341,8 @@
this.helper = false;
}
this.win_offset_y = $(window).scrollTop();
this.win_offset_x = $(window).scrollLeft();
this.scroll_container_offset_y = this.$scroll_container.scrollTop();
this.scroll_container_offset_x = this.$scroll_container.scrollLeft();
this.scroll_offset_y = 0;
this.scroll_offset_x = 0;
this.el_init_offset = this.$player.offset();
+7
View File
@@ -32,6 +32,7 @@
autogenerate_stylesheet: true,
avoid_overlapped_widgets: true,
auto_init: true,
scroll_container: window,
serialize_params: function($w, wgd) {
return {
col: wgd.col,
@@ -132,7 +133,12 @@
*/
function Gridster(el, options) {
this.options = $.extend(true, {}, defaults, options);
this.options.draggable = this.options.draggable || {};
this.options.draggable = $.extend(true, {}, this.options.draggable,
{scroll_container: this.options.scroll_container});
this.$el = $(el);
this.$scroll_container = this.options.scroll_container == window ?
$(window) : this.$el.closest(this.options.scroll_container);
this.$wrapper = this.$el.parent();
this.$widgets = this.$el.children(
this.options.widget_selector).addClass('gs-w');
@@ -990,6 +996,7 @@
move_element: false,
resize: true,
limit: this.options.autogrow_cols ? false : true,
scroll_container: this.options.scroll_container,
start: $.proxy(this.on_start_resize, this),
stop: $.proxy(function(event, ui) {
delay($.proxy(function() {