diff --git a/dist/jquery.gridster.js b/dist/jquery.gridster.js
index bda06f887..cf09a1c58 100644
--- a/dist/jquery.gridster.js
+++ b/dist/jquery.gridster.js
@@ -368,13 +368,15 @@
items: '.gs_w',
distance: 1,
limit: true,
- offset_left: 0
+ offset_left: 0,
+ autoscroll: true
// ,drag: function(e){},
// start : function(e, ui){},
// stop : function(e){}
};
var $body = $(document.body);
+ var $window = $(window);
/**
@@ -409,15 +411,18 @@
this.$dragitems = $(this.options.items, this.$container);
this.is_dragging = false;
this.player_min_left = 0 + this.options.offset_left;
-
this.init();
}
var fn = Draggable.prototype;
fn.init = function() {
+ this.calculate_positions();
this.$container.css('position', 'relative');
this.enable();
+
+ $(window).bind('resize',
+ throttle($.proxy(this.calculate_positions, this), 200));
};
@@ -435,76 +440,16 @@
};
- fn.drag_handler = function(e) {
- if (e.which !== 1) {
- return false;
- }
-
- var self = this;
- var first = true;
- this.$player = $(e.currentTarget);
-
- this.el_init_pos = this.get_actual_pos(this.$player);
- this.mouse_init_pos = this.get_mouse_pos(e);
-
- $body.on('mousemove.draggable', function(mme){
-
- var mouse_actual_pos = self.get_mouse_pos(mme);
- var diff_x = Math.abs(mouse_actual_pos.left - self.mouse_init_pos.left);
- var diff_y = Math.abs(mouse_actual_pos.top - self.mouse_init_pos.top);
- if (!(diff_x > self.options.distance || diff_y > self.options.distance)) {
- return false;
- }
-
- if (first) {
- first = false;
- self.on_dragstart.call(self, mme);
- return false;
- }
-
- if (self.is_dragging == true) {
- throttle(self.on_dragmove.call(self, mme), 130);
- }
-
- return false;
-
- });
-
- return false;
- };
-
-
- fn.on_dragstart = function(e) {
- e.preventDefault();
- this.drag_start = true;
- this.is_dragging = true;
- this.$container_offset = this.$container.offset();
- if (this.options.helper === 'clone') {
- this.$helper = this.$player.clone().appendTo(this.$container).addClass('helper');
- this.helper = true;
- }else{
- this.helper = false;
- }
- this.el_init_offset = this.$player.offset();
- this.player_width = this.$player.width();
- this.player_max_left = this.$container.width() - this.player_width + this.options.offset_left;
- if (this.options.start) {
- this.options.start.call(this.$player, e, {
- helper: this.helper ? this.$helper : this.$player
- });
- }
- return false;
- };
-
-
fn.get_offset = function(e) {
e.preventDefault();
var mouse_actual_pos = this.get_mouse_pos(e);
- var diff_x = mouse_actual_pos.left - this.mouse_init_pos.left;
- var diff_y = mouse_actual_pos.top - this.mouse_init_pos.top;
+ var diff_x = Math.round(
+ mouse_actual_pos.left - this.mouse_init_pos.left);
+ var diff_y = Math.round(mouse_actual_pos.top - this.mouse_init_pos.top);
- var left = this.el_init_offset.left + diff_x - this.$container_offset.left;
- var top = this.el_init_offset.top + diff_y - this.$container_offset.top;
+ var left = Math.round(this.el_init_offset.left + diff_x - this.baseX);
+ var top = Math.round(
+ this.el_init_offset.top + diff_y - this.baseY + this.scrollOffset);
if (this.options.limit) {
if (left > this.player_max_left) {
@@ -521,9 +466,124 @@
};
+ fn.manage_scroll = function(offset) {
+ /* scroll document */
+ var nextScrollTop;
+ var scrollTop = $window.scrollTop();
+ var min_window_y = scrollTop;
+ var max_window_y = min_window_y + this.window_height;
+ var player_top_y = this.baseY + offset.top;
+ var player_bottom_y = player_top_y + this.player_height;
+ var max_player_y = (this.doc_height - this.window_height +
+ this.player_height);
+
+ if ( player_bottom_y > max_window_y) {
+ var diff = player_bottom_y - max_window_y;
+ nextScrollTop = scrollTop + diff;
+ if (nextScrollTop < max_player_y) {
+ $window.scrollTop(nextScrollTop);
+ this.scrollOffset = this.scrollOffset + diff;
+ };
+ }else if (player_top_y < min_window_y) {
+
+ var diff = min_window_y - player_top_y;
+ nextScrollTop = scrollTop - diff;
+ if (nextScrollTop > 0) {
+ $window.scrollTop(nextScrollTop);
+ this.scrollOffset = this.scrollOffset - diff;
+ };
+ }
+
+ }
+
+
+ fn.calculate_positions = function(e) {
+ this.window_height = $window.height();
+ }
+
+
+ fn.drag_handler = function(e) {
+ if (e.which !== 1) {
+ return false;
+ }
+
+ var self = this;
+ var first = true;
+ this.$player = $(e.currentTarget);
+
+ this.el_init_pos = this.get_actual_pos(this.$player);
+ this.mouse_init_pos = this.get_mouse_pos(e);
+ this.offsetX = this.mouse_init_pos.left - this.el_init_pos.left;
+ this.offsetY = this.mouse_init_pos.top - this.el_init_pos.top;
+
+ $body.on('mousemove.draggable', function(mme){
+
+ var mouse_actual_pos = self.get_mouse_pos(mme);
+ var diff_x = Math.abs(
+ mouse_actual_pos.left - self.mouse_init_pos.left);
+ var diff_y = Math.abs(
+ mouse_actual_pos.top - self.mouse_init_pos.top);
+ if (!(diff_x > self.options.distance ||
+ diff_y > self.options.distance)
+ ) {
+ return false;
+ }
+
+ if (first) {
+ first = false;
+ self.on_dragstart.call(self, mme);
+ return false;
+ }
+
+ if (self.is_dragging == true) {
+ self.on_dragmove.call(self, mme);
+ }
+
+ return false;
+
+ });
+
+ return false;
+ };
+
+
+ fn.on_dragstart = function(e) {
+ e.preventDefault();
+ this.drag_start = true;
+ this.is_dragging = true;
+ var offset = this.$container.offset();
+ this.baseX = Math.round(offset.left);
+ this.baseY = Math.round(offset.top);
+ this.doc_height = $(document).height();
+
+ if (this.options.helper === 'clone') {
+ this.$helper = this.$player.clone()
+ .appendTo(this.$container).addClass('helper');
+ this.helper = true;
+ }else{
+ this.helper = false;
+ }
+ this.scrollOffset = 0;
+ this.el_init_offset = this.$player.offset();
+ this.player_width = this.$player.width();
+ this.player_height = this.$player.height();
+ this.player_max_left = (this.$container.width() - this.player_width +
+ this.options.offset_left);
+
+ if (this.options.start) {
+ this.options.start.call(this.$player, e, {
+ helper: this.helper ? this.$helper : this.$player
+ });
+ }
+ return false;
+ };
+
+
fn.on_dragmove = function(e) {
var offset = this.get_offset(e);
+ this.options.autoscroll && this.manage_scroll(offset);
+
(this.helper ? this.$helper : this.$player).css({
'position': 'absolute',
'left' : offset.left,
@@ -569,7 +629,9 @@
fn.enable = function(){
- this.$container.on('mousedown.draggable', this.options.items, $.proxy(this.drag_handler, this));
+ this.$container.on('mousedown.draggable', this.options.items, $.proxy(
+ this.drag_handler, this));
+
$body.on('mouseup.draggable', $.proxy(function(e) {
this.is_dragging = false;
$body.off('mousemove.draggable');
@@ -995,10 +1057,10 @@
self.on_stop_drag.call(self, event, ui);
self.$el.trigger('gridster:dragstop');
},
- drag: function(event, ui) {
+ drag: throttle(function(event, ui) {
self.on_drag.call(self, event, ui);
self.$el.trigger('gridster:drag');
- }
+ }, 130)
});
this.drag_api = this.$el.draggable(draggable_options).data('draggable');
diff --git a/docs/classes/Draggable.html b/docs/classes/Draggable.html
index f9d22f99f..2f5fdcae8 100644
--- a/docs/classes/Draggable.html
+++ b/docs/classes/Draggable.html
@@ -97,7 +97,7 @@
@@ -168,7 +168,7 @@ Provide start/stop/drag callbacks.
- src/jquery.draggable.js:24
+ src/jquery.draggable.js:26
diff --git a/docs/data.json b/docs/data.json
index 80b272173..c83bd743d 100644
--- a/docs/data.json
+++ b/docs/data.json
@@ -137,7 +137,7 @@
"Gridster"
],
"file": "src/jquery.draggable.js",
- "line": 24,
+ "line": 26,
"description": "Basic drag implementation for DOM elements inside a container.\nProvide start/stop/drag callbacks.",
"params": [
{
diff --git a/docs/files/src_jquery.draggable.js.html b/docs/files/src_jquery.draggable.js.html
index c43dc5817..c7d747c5c 100644
--- a/docs/files/src_jquery.draggable.js.html
+++ b/docs/files/src_jquery.draggable.js.html
@@ -107,13 +107,15 @@
items: '.gs_w',
distance: 1,
limit: true,
- offset_left: 0
+ offset_left: 0,
+ autoscroll: true
// ,drag: function(e){},
// start : function(e, ui){},
// stop : function(e){}
};
var $body = $(document.body);
+ var $window = $(window);
/**
@@ -148,15 +150,18 @@
this.$dragitems = $(this.options.items, this.$container);
this.is_dragging = false;
this.player_min_left = 0 + this.options.offset_left;
-
this.init();
}
var fn = Draggable.prototype;
fn.init = function() {
+ this.calculate_positions();
this.$container.css('position', 'relative');
this.enable();
+
+ $(window).bind('resize',
+ throttle($.proxy(this.calculate_positions, this), 200));
};
@@ -174,76 +179,16 @@
};
- fn.drag_handler = function(e) {
- if (e.which !== 1) {
- return false;
- }
-
- var self = this;
- var first = true;
- this.$player = $(e.currentTarget);
-
- this.el_init_pos = this.get_actual_pos(this.$player);
- this.mouse_init_pos = this.get_mouse_pos(e);
-
- $body.on('mousemove.draggable', function(mme){
-
- var mouse_actual_pos = self.get_mouse_pos(mme);
- var diff_x = Math.abs(mouse_actual_pos.left - self.mouse_init_pos.left);
- var diff_y = Math.abs(mouse_actual_pos.top - self.mouse_init_pos.top);
- if (!(diff_x > self.options.distance || diff_y > self.options.distance)) {
- return false;
- }
-
- if (first) {
- first = false;
- self.on_dragstart.call(self, mme);
- return false;
- }
-
- if (self.is_dragging == true) {
- throttle(self.on_dragmove.call(self, mme), 130);
- }
-
- return false;
-
- });
-
- return false;
- };
-
-
- fn.on_dragstart = function(e) {
- e.preventDefault();
- this.drag_start = true;
- this.is_dragging = true;
- this.$container_offset = this.$container.offset();
- if (this.options.helper === 'clone') {
- this.$helper = this.$player.clone().appendTo(this.$container).addClass('helper');
- this.helper = true;
- }else{
- this.helper = false;
- }
- this.el_init_offset = this.$player.offset();
- this.player_width = this.$player.width();
- this.player_max_left = this.$container.width() - this.player_width + this.options.offset_left;
- if (this.options.start) {
- this.options.start.call(this.$player, e, {
- helper: this.helper ? this.$helper : this.$player
- });
- }
- return false;
- };
-
-
fn.get_offset = function(e) {
e.preventDefault();
var mouse_actual_pos = this.get_mouse_pos(e);
- var diff_x = mouse_actual_pos.left - this.mouse_init_pos.left;
- var diff_y = mouse_actual_pos.top - this.mouse_init_pos.top;
+ var diff_x = Math.round(
+ mouse_actual_pos.left - this.mouse_init_pos.left);
+ var diff_y = Math.round(mouse_actual_pos.top - this.mouse_init_pos.top);
- var left = this.el_init_offset.left + diff_x - this.$container_offset.left;
- var top = this.el_init_offset.top + diff_y - this.$container_offset.top;
+ var left = Math.round(this.el_init_offset.left + diff_x - this.baseX);
+ var top = Math.round(
+ this.el_init_offset.top + diff_y - this.baseY + this.scrollOffset);
if (this.options.limit) {
if (left > this.player_max_left) {
@@ -260,9 +205,124 @@
};
+ fn.manage_scroll = function(offset) {
+ /* scroll document */
+ var nextScrollTop;
+ var scrollTop = $window.scrollTop();
+ var min_window_y = scrollTop;
+ var max_window_y = min_window_y + this.window_height;
+ var player_top_y = this.baseY + offset.top;
+ var player_bottom_y = player_top_y + this.player_height;
+ var max_player_y = (this.doc_height - this.window_height +
+ this.player_height);
+
+ if ( player_bottom_y > max_window_y) {
+ var diff = player_bottom_y - max_window_y;
+ nextScrollTop = scrollTop + diff;
+ if (nextScrollTop < max_player_y) {
+ $window.scrollTop(nextScrollTop);
+ this.scrollOffset = this.scrollOffset + diff;
+ };
+ }else if (player_top_y < min_window_y) {
+
+ var diff = min_window_y - player_top_y;
+ nextScrollTop = scrollTop - diff;
+ if (nextScrollTop > 0) {
+ $window.scrollTop(nextScrollTop);
+ this.scrollOffset = this.scrollOffset - diff;
+ };
+ }
+
+ }
+
+
+ fn.calculate_positions = function(e) {
+ this.window_height = $window.height();
+ }
+
+
+ fn.drag_handler = function(e) {
+ if (e.which !== 1) {
+ return false;
+ }
+
+ var self = this;
+ var first = true;
+ this.$player = $(e.currentTarget);
+
+ this.el_init_pos = this.get_actual_pos(this.$player);
+ this.mouse_init_pos = this.get_mouse_pos(e);
+ this.offsetX = this.mouse_init_pos.left - this.el_init_pos.left;
+ this.offsetY = this.mouse_init_pos.top - this.el_init_pos.top;
+
+ $body.on('mousemove.draggable', function(mme){
+
+ var mouse_actual_pos = self.get_mouse_pos(mme);
+ var diff_x = Math.abs(
+ mouse_actual_pos.left - self.mouse_init_pos.left);
+ var diff_y = Math.abs(
+ mouse_actual_pos.top - self.mouse_init_pos.top);
+ if (!(diff_x > self.options.distance ||
+ diff_y > self.options.distance)
+ ) {
+ return false;
+ }
+
+ if (first) {
+ first = false;
+ self.on_dragstart.call(self, mme);
+ return false;
+ }
+
+ if (self.is_dragging == true) {
+ self.on_dragmove.call(self, mme);
+ }
+
+ return false;
+
+ });
+
+ return false;
+ };
+
+
+ fn.on_dragstart = function(e) {
+ e.preventDefault();
+ this.drag_start = true;
+ this.is_dragging = true;
+ var offset = this.$container.offset();
+ this.baseX = Math.round(offset.left);
+ this.baseY = Math.round(offset.top);
+ this.doc_height = $(document).height();
+
+ if (this.options.helper === 'clone') {
+ this.$helper = this.$player.clone()
+ .appendTo(this.$container).addClass('helper');
+ this.helper = true;
+ }else{
+ this.helper = false;
+ }
+ this.scrollOffset = 0;
+ this.el_init_offset = this.$player.offset();
+ this.player_width = this.$player.width();
+ this.player_height = this.$player.height();
+ this.player_max_left = (this.$container.width() - this.player_width +
+ this.options.offset_left);
+
+ if (this.options.start) {
+ this.options.start.call(this.$player, e, {
+ helper: this.helper ? this.$helper : this.$player
+ });
+ }
+ return false;
+ };
+
+
fn.on_dragmove = function(e) {
var offset = this.get_offset(e);
+ this.options.autoscroll && this.manage_scroll(offset);
+
(this.helper ? this.$helper : this.$player).css({
'position': 'absolute',
'left' : offset.left,
@@ -308,7 +368,9 @@
fn.enable = function(){
- this.$container.on('mousedown.draggable', this.options.items, $.proxy(this.drag_handler, this));
+ this.$container.on('mousedown.draggable', this.options.items, $.proxy(
+ this.drag_handler, this));
+
$body.on('mouseup.draggable', $.proxy(function(e) {
this.is_dragging = false;
$body.off('mousemove.draggable');
diff --git a/docs/files/src_jquery.gridster.js.html b/docs/files/src_jquery.gridster.js.html
index 300131894..0c4528404 100644
--- a/docs/files/src_jquery.gridster.js.html
+++ b/docs/files/src_jquery.gridster.js.html
@@ -491,10 +491,10 @@
self.on_stop_drag.call(self, event, ui);
self.$el.trigger('gridster:dragstop');
},
- drag: function(event, ui) {
+ drag: throttle(function(event, ui) {
self.on_drag.call(self, event, ui);
self.$el.trigger('gridster:drag');
- }
+ }, 130)
});
this.drag_api = this.$el.draggable(draggable_options).data('draggable');