From 5ab5ce95dc279148f9d9340fe5efbdf9490bc6bd Mon Sep 17 00:00:00 2001 From: vieron Date: Tue, 24 Jul 2012 15:43:19 +0200 Subject: [PATCH] updated docs and dist --- dist/jquery.gridster.js | 204 +++++++++++++++--------- docs/classes/Draggable.html | 4 +- docs/data.json | 2 +- docs/files/src_jquery.draggable.js.html | 200 +++++++++++++++-------- docs/files/src_jquery.gridster.js.html | 4 +- 5 files changed, 269 insertions(+), 145 deletions(-) diff --git a/dist/jquery.gridster.js b/dist/jquery.gridster.js index bda06f8871..cf09a1c588 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 f9d22f99fb..2f5fdcae80 100644 --- a/docs/classes/Draggable.html +++ b/docs/classes/Draggable.html @@ -97,7 +97,7 @@
- Defined in: src/jquery.draggable.js:24 + Defined in: src/jquery.draggable.js:26
@@ -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 80b2721731..c83bd743df 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 c43dc5817e..c7d747c5c2 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 3001318942..0c45284042 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');