updated docs and dist

This commit is contained in:
vieron
2012-07-23 15:15:26 +02:00
parent f0a50649d1
commit c998cb49b3
17 changed files with 1762 additions and 365 deletions

View File

@@ -1,4 +1,4 @@
/*! gridster.js - v0.1.0 - 2012-07-20
/*! gridster.js - v0.1.0 - 2012-07-23
* https://github.com/ducksboard/gridster.js
* Copyright (c) 2012 ducksboard; Licensed MIT, GPL */
@@ -18,32 +18,40 @@
.gridster .gs_w{
z-index: 2;
position: absolute;
background: rgba(0,0,0,.23);
}
.ready .gs_w:not(.player):not(.preview-holder):not(.ui-draggable-dragging) {
-webkit-transition: left .3s, top .3s;
-moz-transition: left .3s, top .3s;
-o-transition: left .3s, top .3s;
}
.gridster.dragging .ui-sortable-helper {
z-index: 9;
.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;
}
.gridster .preview-holder {
border: 2px dashed #333;
border-radius: 5px;
z-index: 1;
background:#FFF;
position: absolute;
background-color: #fff;
border-color: #fff;
opacity: 0.3;
}
.gridster .ui-draggable-dragging {
.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;
}
/*uncomment this if you draggable.helper option to "clone"*/
.gridster .dragging {
z-index: 10!important;
-webkit-transition: none!important;
-moz-transition: none!important;
-o-transition: none!important;
transition: none!important;
}
/* Uncomment this if you set helper : "clone" in draggable options */
/*.gridster .player {
display: none!important;
opacity:0;
}*/

View File

@@ -1,10 +1,10 @@
/*! gridster.js - v0.1.0 - 2012-07-20
/*! gridster.js - v0.1.0 - 2012-07-23
* https://github.com/ducksboard/gridster.js
* Copyright (c) 2012 ducksboard; Licensed MIT, GPL */
;(function($, window, document, undefined){
/**
* Coords description
* Coords
*
* @class Coords
* @param {HTMLElement|Object} obj HTMLElement or a literal Object with the left, top, width and height properties.
@@ -30,12 +30,20 @@
this.original_coords = this.get();
};
fn.set = function() {
fn.set = function(update, not_update_offsets) {
var el = this.el;
if (el) {
this.data = el.offset();
this.data.width || (this.data.width = el.width());
this.data.height || (this.data.height = el.height());
if (el && !update) {
this.data = {} || el.offset();
this.data.width = el.width();
this.data.height = el.height();
};
if (el && update && !not_update_offsets) {
var offset = el.offset();
this.data.top = offset.top;
this.data.left = offset.left;
}
var d = this.data;
@@ -53,19 +61,23 @@
return this;
};
fn.update = function(data){
if (!data && !this.el) {
return this;
}
if (data) {
var new_data = $.extend(this.data, data);
var new_data = $.extend({}, this.data, data);
this.data = new_data;
return this.set(true, true);
}
this.set();
this.set(true);
return this;
};
fn.get = function(){
return this.coords;
};
@@ -195,18 +207,18 @@
}
};
fn.find_collisions = function(){
fn.find_collisions = function(player_data_coords){
var self = this;
var colliders_coords = [];
var colliders_data = [];
var $colliders = (this.colliders || this.$colliders);
var count = $colliders.length;
var player_coords = self.$element.coords().update(player_data_coords || false).get();
while(count--){
var $collider = self.$colliders ? $($colliders[count]) : $colliders[count];
var player_coords = self.$element.coords().update().get();
var $collider_coords_ins = ($collider.isCoords) ?
$collider.update() : $collider.coords();
$collider : $collider.coords();
var collider_coords = $collider_coords_ins.get();
var overlaps = self.overlaps(player_coords, collider_coords);
@@ -246,8 +258,8 @@
};
fn.get_closest_colliders = function(){
var colliders = this.find_collisions();
fn.get_closest_colliders = function(player_data_coords){
var colliders = this.find_collisions(player_data_coords);
var min_area = 100;
colliders.sort(function(a, b){
@@ -283,30 +295,9 @@
}(jQuery, window, document));
;(function($, window, document, undefined) {
var defaults = {
widget_selector: '> li',
widget_margins: [10, 10],
widget_base_dimensions: [400, 225],
extra_rows: 0,
extra_cols: 0,
min_cols: 1,
min_rows: 10,
autogenerate_stylesheet: true,
serialize_params: function($w, wgd) {
return {
col: wgd.col,
row: wgd.row
};
},
collision: {},
draggable: {}
};
(function(window, undefined) {
/* Debounce and throttle functions taken from underscore.js */
var debounce = function(func, wait, immediate) {
window.debounce = function(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
@@ -321,10 +312,10 @@
};
var throttle = function(func, wait) {
window.throttle = function(func, wait) {
var context, args, timeout, throttling, more, result;
var whenDone = debounce(
function(){ more = throttling = false; }, wait, true);
function(){ more = throttling = false; }, wait);
return function() {
context = this; args = arguments;
var later = function() {
@@ -344,6 +335,248 @@
};
};
})(window)
;(function($, window, document, undefined){
var defaults = {
items: '.gs_w',
distance: 1,
limit: true,
offset_left: 0,
drag: function(e){},
start : function(e, ui){},
stop : function(e){}
};
var $body = $(document.body);
/**
* Draggable
*
* @class Draggable
* @constructor
*/
function Draggable(element, options) {
this.options = $.extend(defaults, options);
this.$container = $(element);
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.$container.css('position', 'relative');
this.enable();
};
fn.get_actual_pos = function($el) {
var pos = $el.position();
return pos;
};
fn.get_mouse_pos = function(e) {
return {
left: e.clientX,
top: e.clientY
};
};
fn.drag_handler = function(e) {
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 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;
if (this.options.limit) {
if (left > this.player_max_left) {
left = this.player_max_left;
}else if(left < this.player_min_left) {
left = this.player_min_left;
}
};
return {
left: left,
top: top
}
};
fn.on_dragmove = function(e) {
var offset = this.get_offset(e);
(this.helper ? this.$helper : this.$player).css({
'position': 'absolute',
'left' : offset.left,
'top' : offset.top
});
var ui = {
'position': {
'left': offset.left,
'top': offset.top
}
};
if (this.options.drag) {
this.options.drag.call(this.$player, e, ui);
}
return false;
};
fn.on_dragstop = function(e) {
var offset = this.get_offset(e);
this.drag_start = false;
var ui = {
'position': {
'left': offset.left,
'top': offset.top
}
}
if (this.options.stop) {
this.options.stop.call(this.$player, e, ui);
}
if (this.helper) {
this.$helper.remove();
}
return false;
};
fn.enable = function(){
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');
if (this.drag_start) {
this.on_dragstop(e);
}
}, this));
};
fn.disable = function(){
this.$container.off('mousedown.draggable');
$body.off('mouseup.draggable');
};
fn.destroy = function(){
this.disable();
$.removeData(this.$container, 'draggable');
};
//jQuery adapter
$.fn.draggable = function ( options ) {
return this.each(function () {
if (!$.data(this, 'draggable')) {
$.data(this, 'draggable', new Draggable( this, options ));
}
});
};
}(jQuery, window, document));
;(function($, window, document, undefined) {
var defaults = {
widget_selector: '> li',
widget_margins: [10, 10],
widget_base_dimensions: [400, 225],
extra_rows: 0,
extra_cols: 0,
min_cols: 1,
min_rows: 10,
autogenerate_stylesheet: true,
avoid_overlapped_widgets: true,
serialize_params: function($w, wgd) {
return {
col: wgd.col,
row: wgd.row
};
},
collision: {},
draggable: {
distance: 4
}
};
/**
* @class Gridster
@@ -401,6 +634,8 @@
this.init();
}
Gridster.generated_stylesheets = [];
var fn = Gridster.prototype;
fn.init = function() {
@@ -415,6 +650,31 @@
};
/**
* Disable dragging.
*
* @method enable
* @return {Class} Returns the instance of the Gridster Class.
*/
fn.disable = function(){
this.$wrapper.find('.player-revert').removeClass('player-revert');
this.drag_api.disable();
return this;
}
/**
* Enable dragging.
*
* @method enable
* @return {Class} Returns the instance of the Gridster Class.
*/
fn.enable = function(){
this.drag_api.enable();
return this;
}
/**
* Add a new widget to the grid.
*
@@ -422,7 +682,7 @@
* @param {String} html The string representing the HTML of the widget.
* @param {Number} size_x The nº of rows the widget occupies horizontally.
* @param {Number} size_y The nº of columns the widget occupies vertically.
* @return {HTMLElement} Returns the jQuery wrapped HTMLElement representing
* @return {HTMLElement} Returns the jQuery wrapped HTMLElement representing.
* the widget that was just created.
*/
fn.add_widget = function(html, size_x, size_y) {
@@ -439,12 +699,9 @@
this.register_widget($w);
this.$widgets.draggable('destroy');
this.draggable();
this.set_dom_grid_height();
$w.fadeIn();
return $w.fadeIn();
};
@@ -504,7 +761,6 @@
this.$widgets = this.$widgets.not($el);
var $nexts = this.widgets_below($el);
this.remove_from_gridmap(wgd);
$el.fadeOut($.proxy(function(){
@@ -562,7 +818,8 @@
* @return {Array} Returns the instance of the Gridster class.
*/
fn.register_widget = function($el) {
var widget_grid_data = {
var wgd = {
'col': parseInt($el.attr('data-col'), 10),
'row': parseInt($el.attr('data-row'), 10),
'size_x': parseInt($el.attr('data-sizex'), 10),
@@ -570,13 +827,27 @@
'el': $el
};
if (this.options.avoid_overlapped_widgets &&
!this.can_move_to(
{ size_x: wgd.size_x, size_y: wgd.size_y }, wgd.col, wgd.row)
) {
wgd = this.next_position(wgd.size_x, wgd.size_y);
wgd.el = $el;
$el.attr({
'data-col': wgd.col,
'data-row': wgd.row,
'data-sizex': wgd.size_x,
'data-sizey': wgd.size_y
});
};
// attach Coord object to player data-coord attribute
$el.data('coords', $el.coords());
// Extend Coord object with grid position info
$el.data('coords').grid = widget_grid_data;
$el.data('coords').grid = wgd;
this.add_to_gridmap(widget_grid_data, $el);
this.add_to_gridmap(wgd, $el);
this.widgets.push($el);
return this;
};
@@ -647,8 +918,10 @@
fn.draggable = function() {
var self = this;
var draggable_options = $.extend(true, {}, this.options.draggable, {
// containment : this.$wrapper,
offset_left: this.options.widget_margins[0],
items: '.gs_w',
start: function(event, ui) {
self.$widgets.filter('.player-revert').removeClass('player-revert');
self.$player = $(this);
self.$helper = self.options.draggable.helper === 'clone' ?
$(ui.helper) : self.$player;
@@ -658,16 +931,16 @@
self.$el.trigger('gridster:dragstart');
},
stop: function(event, ui) {
self.on_stop_drag.call(self, ui);
self.on_stop_drag.call(self, event, ui);
self.$el.trigger('gridster:dragstop');
},
drag: throttle(function(event, ui) {
drag: function(event, ui) {
self.on_drag.call(self, event, ui);
self.$el.trigger('gridster:drag');
}, 100, true)
}
});
this.$widgets.draggable(draggable_options);
this.drag_api = this.$el.draggable(draggable_options).data('draggable');
return this;
};
@@ -681,8 +954,10 @@
* See http://jqueryui.com/demos/draggable/ for more info.
*/
fn.on_start_drag = function(event, ui) {
this.$helper.add(this.$player).add(this.$wrapper).addClass('dragging');
this.$player.addClass('player');
this.$wrapper.addClass('dragging');
this.player_grid_data = this.$player.coords().grid;
this.placeholder_grid_data = $.extend({}, this.player_grid_data);
@@ -701,8 +976,9 @@
this.last_cols = [];
this.last_rows = [];
// see jquery.collision.js
this.drag_api = this.$helper.collision(
this.collision_api = this.$helper.collision(
colliders, this.options.collision);
this.$preview_holder = $('<li />', {
@@ -730,7 +1006,11 @@
* See http://jqueryui.com/demos/draggable/ for more info.
*/
fn.on_drag = function(event, ui) {
this.colliders_data = this.drag_api.get_closest_colliders();
var abs_offset = {
left: ui.position.left + this.baseX,
top: ui.position.top + this.baseY
}
this.colliders_data = this.collision_api.get_closest_colliders(abs_offset);
this.on_overlapped_column_change(
this.on_start_overlapping_column,
@@ -763,8 +1043,11 @@
* See http://jqueryui.com/demos/draggable/ for more info.
*/
fn.on_stop_drag = function(event, ui) {
this.$wrapper.removeClass('dragging');
this.colliders_data = this.drag_api.get_closest_colliders();
this.$helper.add(this.$player).add(this.$wrapper).removeClass('dragging');
ui.position.left = ui.position.left + this.baseX;
ui.position.top = ui.position.top + this.baseY;
this.colliders_data = this.collision_api.get_closest_colliders(ui.position);
this.on_overlapped_column_change(
this.on_start_overlapping_column,
@@ -776,13 +1059,14 @@
this.on_stop_overlapping_row
);
this.$player.add(this.$helper).attr({
this.$player
.addClass('player-revert').removeClass('player').attr({
'data-col': this.placeholder_grid_data.col,
'data-row': this.placeholder_grid_data.row
}).css({
'left': '',
'top': ''
}).removeClass('player');
});
this.$changed = this.$changed.add(this.$player);
@@ -1276,12 +1560,21 @@
size_y: phgd.size_y,
size_x: phgd.size_x
});
//Prevents widgets go out of the grid
var right_col = (col + phgd.size_x - 1);
if (right_col > this.cols) {
col = col - (right_col - col);
};
var moved_down = this.placeholder_grid_data.row < row;
var changed_column = this.placeholder_grid_data.col !== col;
this.placeholder_grid_data.col = col;
this.placeholder_grid_data.row = row;
this.cells_occupied_by_placeholder = this.get_cells_occupied(
this.placeholder_grid_data);
@@ -1631,24 +1924,28 @@
var can_go_up = true;
y_units || (y_units = 1);
if (!this.can_go_up($widget)) { return false; } //break;
// if (!this.can_go_up($widget)) { return false; } //break;
console.log($widget, y_units);
this.for_each_column_occupied(el_grid_data, function(col){
// can_go_up
if ($.inArray($widget, moved) === -1) {
var widget_grid_data = $widget.coords().grid;
var widget_grid_data = $.extend({}, el_grid_data);
var next_row = actual_row - y_units;
next_row = this.can_go_up_to_row(widget_grid_data, col, next_row);
if (!next_row) {
console.log('can_go_up_to_row?', $widget, y_units, next_row);
if (next_row === false) {
return true;
}
var $next_widgets = this.widgets_below($widget);
console.log('$next_widgets', $next_widgets);
this.remove_from_gridmap(widget_grid_data);
widget_grid_data.row = next_row;
this.add_to_gridmap(widget_grid_data);
$widget.attr('data-row', widget_grid_data.row);
console.log($widget, 'next-row', next_row);
$widget.attr('data-row', next_row);
this.$changed = this.$changed.add($widget);
moved.push($widget);
@@ -1733,9 +2030,13 @@
r = actual_row;
while (r--){
if (this.is_empty(tcol, r) &&
!this.is_placeholder_in(tcol, r)
var $w = this.is_widget(tcol, r);
console.log(tcol, r, $w, this.is_empty(tcol, r));
if ($w && $w.is(widget_grid_data.el) ||
(this.is_empty(tcol, r) &&
!this.is_placeholder_in(tcol, r))
) {
console.log('push', tcol, r);
urc[tcol].push(r);
}else{
break;
@@ -1749,6 +2050,8 @@
});
console.log('urc', urc);
if (!result) { return false; }
//get common rows starting from upper position in all the columns widget occupies
@@ -1865,7 +2168,8 @@
if (initial_row === 1) { return false; }
this.for_each_column_occupied(el_grid_data, function(col){
if (this.is_occupied(col, prev_row) ||
if (!$el.is(this.is_widget(col, prev_row)) &&
this.is_occupied(col, prev_row) ||
this.is_player(col, prev_row) ||
this.is_placeholder_in(col, prev_row)
) {
@@ -1902,6 +2206,12 @@
};
var result = true;
//Prevents widgets go out of the grid
var right_col = col + widget_grid_data.size_x - 1;
if (right_col > this.cols) {
return false;
};
this.for_each_cell_occupied(future_wd, function(tcol, trow){
var $tw = this.is_widget(tcol, trow);
if ($tw && (!widget_grid_data.el || $tw.is($w))) {
@@ -2146,6 +2456,33 @@
};
fn.get_widgets_from = function(col, row) {
var ga = this.gridmap;
var $widgets = $();
if (col) {
$widgets = $widgets.add(
this.$widgets.filter(function(){
var tcol = $(this).attr('data-col');
return (tcol == col || tcol > col);
})
);
};
if (row) {
$widgets = $widgets.add(
this.$widgets.filter(function(){
var trow = $(this).attr('data-row');
return (trow == row || trow > row);
})
);
};
return $widgets;
}
/**
* Set the current height of the parent grid.
*
@@ -2168,7 +2505,7 @@
* @param {Number} cols Number of rows.
* @return {Object} Returns the instance of the Gridster class.
*/
fn.generate_stylesheet = function(rows, cols) {
fn.generate_stylesheet = function(opts) {
var styles = '';
var extra_cells = 10;
var max_size_y = 6;
@@ -2176,28 +2513,50 @@
var i;
var rules;
opts || (opts = {});
opts.cols || (opts.cols = this.cols);
opts.rows || (opts.rows = this.rows);
opts.namespace || (opts.namespace = '');
opts.widget_base_dimensions ||
(opts.widget_base_dimensions = this.options.widget_base_dimensions);
opts.widget_margins ||
(opts.widget_margins = this.options.widget_margins);
opts.min_widget_width = (opts.widget_margins[0] * 2) +
opts.widget_base_dimensions[0];
opts.min_widget_height = (opts.widget_margins[1] * 2) +
opts.widget_base_dimensions[1];
var serialized_opts = $.param(opts);
// don't duplicate stylesheets for the same configuration
if ($.inArray(serialized_opts, Gridster.generated_stylesheets) >= 0) {
return false;
};
Gridster.generated_stylesheets.push(serialized_opts);
/* generate CSS styles for cols */
for (i = cols + extra_cells; i >= 0; i--) {
styles += '[data-col="'+ (i + 1) +'"] { left: ' +
(i * this.min_widget_width) +
for (i = opts.cols + extra_cells; i >= 0; i--) {
styles += opts.namespace + ' [data-col="'+ (i + 1) +'"] { left: ' +
((i * opts.widget_base_dimensions[0]) + (i *opts.widget_margins[0]) + ((i+1) * opts.widget_margins[0])) +
'px;} ';
}
/* generate CSS styles for rows */
for (i = rows + extra_cells; i >= 0; i--) {
styles += '[data-row="' + (i + 1) + '"] { top: ' +
(i * this.min_widget_height) + 'px;} ';
for (i = opts.rows + extra_cells; i >= 0; i--) {
styles += opts.namespace + ' [data-row="' + (i + 1) + '"] { top: ' +
((i * opts.widget_base_dimensions[1]) + (i * opts.widget_margins[1]) + ((i+1) * opts.widget_margins[1]) ) +
'px;} ';
}
for (var y = 1; y < max_size_y; y++) {
styles += '[data-sizey="' + (y) + '"] { height: ' +
(y * this.options.widget_base_dimensions[1] + (y-1)*(this.options.widget_margins[1]*2)) + 'px;}';
styles += opts.namespace + ' [data-sizey="' + (y) + '"] { height: ' +
(y * opts.widget_base_dimensions[1] + (y-1)*(opts.widget_margins[1]*2)) + 'px;}';
}
for (var x = 1; x < max_size_x; x++) {
styles += '[data-sizex="' + (x) + '"] { width: ' +
(x * this.options.widget_base_dimensions[0] + (x-1)*(this.options.widget_margins[0]*2)) + 'px;}';
styles += opts.namespace + ' [data-sizex="' + (x) + '"] { width: ' +
(x * opts.widget_base_dimensions[0] + (x-1)*(opts.widget_margins[0]*2)) + 'px;}';
}
return this.add_style_tag(styles);
@@ -2328,19 +2687,19 @@
var min_cols = Math.max.apply(null, actual_cols);
var min_rows = Math.max.apply(null, actual_rows);
cols = Math.max(min_cols, cols, this.options.min_cols);
rows = Math.max(min_rows, rows, this.options.min_rows);
this.cols = Math.max(min_cols, cols, this.options.min_cols);
this.rows = Math.max(min_rows, rows, this.options.min_rows);
this.baseX = ($(window).width() - aw) / 2;
this.baseY = this.$wrapper.offset().top;
if (this.options.autogenerate_stylesheet) {
this.generate_stylesheet(rows, cols);
this.generate_stylesheet();
}
/* more faux rows that needed are created so that there are cells
* where drag beyond the limits */
return this.generate_faux_grid(rows, cols);
return this.generate_faux_grid(this.rows, this.cols);
};

View File

@@ -1,3 +1,3 @@
/*! gridster.js - v0.1.0 - 2012-07-20
/*! gridster.js - v0.1.0 - 2012-07-23
* https://github.com/ducksboard/gridster.js
* Copyright (c) 2012 ducksboard; Licensed MIT, GPL */.gridster{position:relative}.gridster>*{margin:0 auto;-webkit-transition:height .4s;-moz-transition:height .4s;-o-transition:height .4s;-ms-transition:height .4s;transition:height .4s}.gridster .gs_w{z-index:2;position:absolute;background:rgba(0,0,0,.23)}.ready .gs_w:not(.player):not(.preview-holder):not(.ui-draggable-dragging){-webkit-transition:left .3s,top .3s;-moz-transition:left .3s,top .3s;-o-transition:left .3s,top .3s}.gridster.dragging .ui-sortable-helper{z-index:9}.gridster .preview-holder{border:2px dashed #333;border-radius:5px;z-index:1;background:#FFF;position:absolute}.gridster .ui-draggable-dragging{z-index:10!important}
* Copyright (c) 2012 ducksboard; Licensed MIT, GPL */.gridster{position:relative}.gridster>*{margin:0 auto;-webkit-transition:height .4s;-moz-transition:height .4s;-o-transition:height .4s;-ms-transition:height .4s;transition:height .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}.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{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;transition:none!important}

File diff suppressed because one or more lines are too long

View File

@@ -3,6 +3,7 @@ YUI.add("yuidoc-meta", function(Y) {
"classes": [
"Collision",
"Coords",
"Draggable",
"Gridster"
],
"modules": [],

View File

@@ -46,6 +46,8 @@
<li><a href="..&#x2F;classes/Coords.html">Coords</a></li>
<li><a href="..&#x2F;classes/Draggable.html">Draggable</a></li>
<li><a href="..&#x2F;classes/Gridster.html">Gridster</a></li>
</ul>

View File

@@ -46,6 +46,8 @@
<li><a href="..&#x2F;classes/Coords.html">Coords</a></li>
<li><a href="..&#x2F;classes/Draggable.html">Draggable</a></li>
<li><a href="..&#x2F;classes/Gridster.html">Gridster</a></li>
</ul>
@@ -107,7 +109,7 @@
<div class="box intro">
<p>Coords description</p>
<p>Coords</p>
</div>

222
docs/classes/Draggable.html Normal file
View File

@@ -0,0 +1,222 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Draggable</title>
<link rel="stylesheet" href="http:&#x2F;&#x2F;yui.yahooapis.com&#x2F;3.5.1&#x2F;build&#x2F;cssgrids&#x2F;cssgrids-min.css">
<link rel="stylesheet" href="..&#x2F;assets/vendor/prettify/prettify-min.css">
<link rel="stylesheet" href="..&#x2F;assets/css/main.css" id="site_styles">
<link rel="shortcut icon" type="image/png" href="..&#x2F;assets/favicon.png">
<script src="http:&#x2F;&#x2F;yui.yahooapis.com&#x2F;combo?3.5.1&#x2F;build&#x2F;yui&#x2F;yui-min.js"></script>
</head>
<body class="yui3-skin-sam">
<div id="doc">
<div id="hd" class="yui3-g header">
<div class="yui3-u-3-4">
<!-- <h1><img src="..&#x2F;assets/css/logo.png" title=""></h1> -->
<h1><img src="http://ducksboard.com/wp-content/themes/blog-theme-ducksboard/images/ducksboard.png" title=""></h1>
</div>
<div class="yui3-u-1-4 version">
<em>API Docs for: </em>
</div>
</div>
<div id="bd" class="yui3-g">
<div class="yui3-u-1-4">
<div id="docs-sidebar" class="sidebar apidocs">
<div id="api-list">
<h2 class="off-left">APIs</h2>
<div id="api-tabview" class="tabview">
<ul class="tabs">
<li><a href="#api-classes">Classes</a></li>
<li><a href="#api-modules">Modules</a></li>
</ul>
<div id="api-tabview-filter">
<input type="search" id="api-filter" placeholder="Type to filter APIs">
</div>
<div id="api-tabview-panel">
<ul id="api-classes" class="apis classes">
<li><a href="..&#x2F;classes/Collision.html">Collision</a></li>
<li><a href="..&#x2F;classes/Coords.html">Coords</a></li>
<li><a href="..&#x2F;classes/Draggable.html">Draggable</a></li>
<li><a href="..&#x2F;classes/Gridster.html">Gridster</a></li>
</ul>
<ul id="api-modules" class="apis modules">
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="yui3-u-3-4">
<div id="api-options">
Show:
<label for="api-show-inherited">
<input type="checkbox" id="api-show-inherited" checked>
Inherited
</label>
<label for="api-show-protected">
<input type="checkbox" id="api-show-protected">
Protected
</label>
<label for="api-show-private">
<input type="checkbox" id="api-show-private">
Private
</label>
<label for="api-show-deprecated">
<input type="checkbox" id="api-show-deprecated">
Deprecated
</label>
</div>
<div class="apidocs">
<div id="docs-main">
<div class="content">
<h1>Draggable Class</h1>
<div class="box meta">
<div class="foundat">
Defined in: <a href="..&#x2F;files&#x2F;src_jquery.draggable.js.html#l24"><code>src&#x2F;jquery.draggable.js:24</code></a>
</div>
</div>
<div class="box intro">
<p>Draggable</p>
</div>
<div class="constructor">
<h2>Constructor</h2>
<div id="method_Draggable" class="method item">
<h3 class="name"><code>Draggable</code></h3>
<span class="paren">()</span>
<div class="meta">
<p>
Defined in
<a href="..&#x2F;files&#x2F;src_jquery.draggable.js.html#l24"><code>src&#x2F;jquery.draggable.js:24</code></a>
</p>
</div>
<div class="description">
</div>
</div>
</div>
<div id="classdocs" class="tabview">
<ul class="api-class-tabs">
<li class="api-class-tab index"><a href="#index">Index</a></li>
</ul>
<div>
<div id="index" class="api-class-tabpanel index">
<h2 class="off-left">Item Index</h2>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="..&#x2F;assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>
<script src="..&#x2F;assets/js/yui-prettify.js"></script>
<script src="..&#x2F;assets/../api.js"></script>
<script src="..&#x2F;assets/js/api-filter.js"></script>
<script src="..&#x2F;assets/js/api-list.js"></script>
<script src="..&#x2F;assets/js/api-search.js"></script>
<script src="..&#x2F;assets/js/apidocs.js"></script>
</body>
</html>

View File

@@ -46,6 +46,8 @@
<li><a href="..&#x2F;classes/Coords.html">Coords</a></li>
<li><a href="..&#x2F;classes/Draggable.html">Draggable</a></li>
<li><a href="..&#x2F;classes/Gridster.html">Gridster</a></li>
</ul>
@@ -106,7 +108,7 @@
<div class="foundat">
Defined in: <a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l70"><code>src&#x2F;jquery.gridster.js:70</code></a>
Defined in: <a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l33"><code>src&#x2F;jquery.gridster.js:33</code></a>
</div>
@@ -172,7 +174,7 @@
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l70"><code>src&#x2F;jquery.gridster.js:70</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l33"><code>src&#x2F;jquery.gridster.js:33</code></a>
</p>
@@ -497,6 +499,20 @@
</li>
<li class="index-item method">
<a href="#method_enable">enable</a>
</li>
<li class="index-item method">
<a href="#method_enable">enable</a>
</li>
<li class="index-item method">
@@ -847,6 +863,13 @@
</li>
<li class="index-item method">
<a href="#method_sort_by_row_asc">sort_by_row_asc</a>
</li>
<li class="index-item method">
@@ -939,7 +962,7 @@
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1899"><code>src&#x2F;jquery.gridster.js:1899</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l2004"><code>src&#x2F;jquery.gridster.js:2004</code></a>
</p>
@@ -1049,7 +1072,7 @@
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l339"><code>src&#x2F;jquery.gridster.js:339</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l342"><code>src&#x2F;jquery.gridster.js:342</code></a>
</p>
@@ -1182,7 +1205,7 @@
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l140"><code>src&#x2F;jquery.gridster.js:140</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l129"><code>src&#x2F;jquery.gridster.js:129</code></a>
</p>
@@ -1260,7 +1283,7 @@
<span class="type">HTMLElement</span>:
Returns the jQuery wrapped HTMLElement representing
Returns the jQuery wrapped HTMLElement representing.
the widget that was just created.
</div>
@@ -1317,7 +1340,7 @@
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l995"><code>src&#x2F;jquery.gridster.js:995</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1048"><code>src&#x2F;jquery.gridster.js:1048</code></a>
</p>
@@ -1435,7 +1458,7 @@
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1402"><code>src&#x2F;jquery.gridster.js:1402</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1455"><code>src&#x2F;jquery.gridster.js:1455</code></a>
</p>
@@ -1572,7 +1595,7 @@ upper row possible.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1044"><code>src&#x2F;jquery.gridster.js:1044</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1097"><code>src&#x2F;jquery.gridster.js:1097</code></a>
</p>
@@ -1690,7 +1713,7 @@ upper row possible.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1574"><code>src&#x2F;jquery.gridster.js:1574</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1627"><code>src&#x2F;jquery.gridster.js:1627</code></a>
</p>
@@ -1817,7 +1840,7 @@ into account the dimensions (<code>size_y</code> and <code>size_x</code> attrs.
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l361"><code>src&#x2F;jquery.gridster.js:361</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l364"><code>src&#x2F;jquery.gridster.js:364</code></a>
</p>
@@ -1888,7 +1911,7 @@ into account the dimensions (<code>size_y</code> and <code>size_x</code> attrs.
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1537"><code>src&#x2F;jquery.gridster.js:1537</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1590"><code>src&#x2F;jquery.gridster.js:1590</code></a>
</p>
@@ -1905,6 +1928,148 @@ into account the dimensions (<code>size_y</code> and <code>size_x</code> attrs.
<div class="returns">
<h4>Returns:</h4>
<div class="returns-description">
<span class="type">Class</span>:
Returns the instance of the Gridster Class.
</div>
</div>
</div>
<div id="method_enable" class="method item">
<h3 class="name"><code>enable</code></h3>
<span class="paren">()</span>
<span class="returns-inline">
<span class="type">Class</span>
</span>
<div class="meta">
<p>
Defined in
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l105"><code>src&#x2F;jquery.gridster.js:105</code></a>
</p>
</div>
<div class="description">
<p>Disable dragging.</p>
</div>
<div class="returns">
<h4>Returns:</h4>
<div class="returns-description">
<span class="type">Class</span>:
Returns the instance of the Gridster Class.
</div>
</div>
</div>
<div id="method_enable" class="method item">
<h3 class="name"><code>enable</code></h3>
<span class="paren">()</span>
<span class="returns-inline">
<span class="type">Class</span>
</span>
<div class="meta">
<p>
Defined in
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l117"><code>src&#x2F;jquery.gridster.js:117</code></a>
</p>
</div>
<div class="description">
<p>Enable dragging.</p>
</div>
<div class="returns">
<h4>Returns:</h4>
@@ -1975,7 +2140,7 @@ into account the dimensions (<code>size_y</code> and <code>size_x</code> attrs.
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1671"><code>src&#x2F;jquery.gridster.js:1671</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1730"><code>src&#x2F;jquery.gridster.js:1730</code></a>
</p>
@@ -2103,7 +2268,7 @@ each one.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1692"><code>src&#x2F;jquery.gridster.js:1692</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1751"><code>src&#x2F;jquery.gridster.js:1751</code></a>
</p>
@@ -2231,7 +2396,7 @@ each one.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1711"><code>src&#x2F;jquery.gridster.js:1711</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1770"><code>src&#x2F;jquery.gridster.js:1770</code></a>
</p>
@@ -2364,7 +2529,7 @@ each one.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1777"><code>src&#x2F;jquery.gridster.js:1777</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1836"><code>src&#x2F;jquery.gridster.js:1836</code></a>
</p>
@@ -2511,7 +2676,7 @@ iteration. The value of <code>this</code> inside the function is the jQuery wrap
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1793"><code>src&#x2F;jquery.gridster.js:1793</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1852"><code>src&#x2F;jquery.gridster.js:1852</code></a>
</p>
@@ -2652,7 +2817,7 @@ iteration. The value of <code>this</code> inside the function is the jQuery wrap
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1922"><code>src&#x2F;jquery.gridster.js:1922</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l2027"><code>src&#x2F;jquery.gridster.js:2027</code></a>
</p>
@@ -2762,7 +2927,7 @@ detect row or column that we want to go.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1996"><code>src&#x2F;jquery.gridster.js:1996</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l2101"><code>src&#x2F;jquery.gridster.js:2101</code></a>
</p>
@@ -2850,7 +3015,7 @@ detect row or column that we want to go.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1855"><code>src&#x2F;jquery.gridster.js:1855</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1941"><code>src&#x2F;jquery.gridster.js:1941</code></a>
</p>
@@ -2969,7 +3134,7 @@ detect row or column that we want to go.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1643"><code>src&#x2F;jquery.gridster.js:1643</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1702"><code>src&#x2F;jquery.gridster.js:1702</code></a>
</p>
@@ -3063,7 +3228,7 @@ detect row or column that we want to go.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1809"><code>src&#x2F;jquery.gridster.js:1809</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1868"><code>src&#x2F;jquery.gridster.js:1868</code></a>
</p>
@@ -3144,7 +3309,7 @@ detect row or column that we want to go.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1608"><code>src&#x2F;jquery.gridster.js:1608</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1667"><code>src&#x2F;jquery.gridster.js:1667</code></a>
</p>
@@ -3249,7 +3414,7 @@ detect row or column that we want to go.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1626"><code>src&#x2F;jquery.gridster.js:1626</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1685"><code>src&#x2F;jquery.gridster.js:1685</code></a>
</p>
@@ -3366,7 +3531,7 @@ detect row or column that we want to go.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1095"><code>src&#x2F;jquery.gridster.js:1095</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1148"><code>src&#x2F;jquery.gridster.js:1148</code></a>
</p>
@@ -3494,7 +3659,7 @@ the</code>upper<em>rows<code>array. Iteration starts from row specified in</code
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1982"><code>src&#x2F;jquery.gridster.js:1982</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l2087"><code>src&#x2F;jquery.gridster.js:2087</code></a>
</p>
@@ -3565,7 +3730,7 @@ the</code>upper<em>rows<code>array. Iteration starts from row specified in</code
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1173"><code>src&#x2F;jquery.gridster.js:1173</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1226"><code>src&#x2F;jquery.gridster.js:1226</code></a>
</p>
@@ -3636,7 +3801,7 @@ the</code>upper<em>rows<code>array. Iteration starts from row specified in</code
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l931"><code>src&#x2F;jquery.gridster.js:931</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l975"><code>src&#x2F;jquery.gridster.js:975</code></a>
</p>
@@ -3723,7 +3888,7 @@ the</code>upper<em>rows<code>array. Iteration starts from row specified in</code
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l850"><code>src&#x2F;jquery.gridster.js:850</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l894"><code>src&#x2F;jquery.gridster.js:894</code></a>
</p>
@@ -3848,7 +4013,7 @@ the</code>upper<em>rows<code>array. Iteration starts from row specified in</code
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l869"><code>src&#x2F;jquery.gridster.js:869</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l913"><code>src&#x2F;jquery.gridster.js:913</code></a>
</p>
@@ -3973,7 +4138,7 @@ the</code>upper<em>rows<code>array. Iteration starts from row specified in</code
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l823"><code>src&#x2F;jquery.gridster.js:823</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l867"><code>src&#x2F;jquery.gridster.js:867</code></a>
</p>
@@ -4092,7 +4257,7 @@ the</code>upper<em>rows<code>array. Iteration starts from row specified in</code
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l837"><code>src&#x2F;jquery.gridster.js:837</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l881"><code>src&#x2F;jquery.gridster.js:881</code></a>
</p>
@@ -4202,7 +4367,7 @@ the</code>upper<em>rows<code>array. Iteration starts from row specified in</code
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l791"><code>src&#x2F;jquery.gridster.js:791</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l835"><code>src&#x2F;jquery.gridster.js:835</code></a>
</p>
@@ -4330,7 +4495,7 @@ HTMLElements.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l808"><code>src&#x2F;jquery.gridster.js:808</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l852"><code>src&#x2F;jquery.gridster.js:852</code></a>
</p>
@@ -4456,7 +4621,7 @@ and col given.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l889"><code>src&#x2F;jquery.gridster.js:889</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l933"><code>src&#x2F;jquery.gridster.js:933</code></a>
</p>
@@ -4582,7 +4747,7 @@ else returns the jQuery HTMLElement
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l914"><code>src&#x2F;jquery.gridster.js:914</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l958"><code>src&#x2F;jquery.gridster.js:958</code></a>
</p>
@@ -4714,7 +4879,7 @@ params and if this is under the widget that is being dragged.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l745"><code>src&#x2F;jquery.gridster.js:745</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l789"><code>src&#x2F;jquery.gridster.js:789</code></a>
</p>
@@ -4856,7 +5021,7 @@ each widget) in descending way.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1357"><code>src&#x2F;jquery.gridster.js:1357</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1410"><code>src&#x2F;jquery.gridster.js:1410</code></a>
</p>
@@ -4975,7 +5140,7 @@ each widget) in descending way.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1268"><code>src&#x2F;jquery.gridster.js:1268</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1321"><code>src&#x2F;jquery.gridster.js:1321</code></a>
</p>
@@ -5087,7 +5252,7 @@ if they can.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1311"><code>src&#x2F;jquery.gridster.js:1311</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1364"><code>src&#x2F;jquery.gridster.js:1364</code></a>
</p>
@@ -5213,7 +5378,7 @@ if they can.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l173"><code>src&#x2F;jquery.gridster.js:173</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l159"><code>src&#x2F;jquery.gridster.js:159</code></a>
</p>
@@ -5335,7 +5500,7 @@ if they can.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l444"><code>src&#x2F;jquery.gridster.js:444</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l452"><code>src&#x2F;jquery.gridster.js:452</code></a>
</p>
@@ -5448,7 +5613,7 @@ if they can.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l521"><code>src&#x2F;jquery.gridster.js:521</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l545"><code>src&#x2F;jquery.gridster.js:545</code></a>
</p>
@@ -5576,7 +5741,7 @@ overlapped or stops being overlapped.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l561"><code>src&#x2F;jquery.gridster.js:561</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l585"><code>src&#x2F;jquery.gridster.js:585</code></a>
</p>
@@ -5700,7 +5865,7 @@ overlapped or stops being overlapped.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l395"><code>src&#x2F;jquery.gridster.js:395</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l400"><code>src&#x2F;jquery.gridster.js:400</code></a>
</p>
@@ -5807,7 +5972,7 @@ overlapped or stops being overlapped.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1206"><code>src&#x2F;jquery.gridster.js:1206</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1259"><code>src&#x2F;jquery.gridster.js:1259</code></a>
</p>
@@ -5911,7 +6076,7 @@ overlapped or stops being overlapped.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1218"><code>src&#x2F;jquery.gridster.js:1218</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1271"><code>src&#x2F;jquery.gridster.js:1271</code></a>
</p>
@@ -6017,7 +6182,7 @@ overlapped or stops being overlapped.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l470"><code>src&#x2F;jquery.gridster.js:470</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l489"><code>src&#x2F;jquery.gridster.js:489</code></a>
</p>
@@ -6124,7 +6289,7 @@ overlapped or stops being overlapped.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1230"><code>src&#x2F;jquery.gridster.js:1230</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1283"><code>src&#x2F;jquery.gridster.js:1283</code></a>
</p>
@@ -6228,7 +6393,7 @@ overlapped or stops being overlapped.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1248"><code>src&#x2F;jquery.gridster.js:1248</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1301"><code>src&#x2F;jquery.gridster.js:1301</code></a>
</p>
@@ -6322,7 +6487,7 @@ overlapped or stops being overlapped.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1958"><code>src&#x2F;jquery.gridster.js:1958</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l2063"><code>src&#x2F;jquery.gridster.js:2063</code></a>
</p>
@@ -6394,7 +6559,7 @@ the browser is resized.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l277"><code>src&#x2F;jquery.gridster.js:277</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l265"><code>src&#x2F;jquery.gridster.js:265</code></a>
</p>
@@ -6476,7 +6641,7 @@ mapped array of positions.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l326"><code>src&#x2F;jquery.gridster.js:326</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l329"><code>src&#x2F;jquery.gridster.js:329</code></a>
</p>
@@ -6581,7 +6746,7 @@ mapped array of positions.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l217"><code>src&#x2F;jquery.gridster.js:217</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l201"><code>src&#x2F;jquery.gridster.js:201</code></a>
</p>
@@ -6685,7 +6850,7 @@ mapped array of positions.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l243"><code>src&#x2F;jquery.gridster.js:243</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l231"><code>src&#x2F;jquery.gridster.js:231</code></a>
</p>
@@ -6783,7 +6948,7 @@ mapped array of positions.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l265"><code>src&#x2F;jquery.gridster.js:265</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l253"><code>src&#x2F;jquery.gridster.js:253</code></a>
</p>
@@ -6871,7 +7036,7 @@ mapped array of positions.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1520"><code>src&#x2F;jquery.gridster.js:1520</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1573"><code>src&#x2F;jquery.gridster.js:1573</code></a>
</p>
@@ -6980,7 +7145,7 @@ mapped array of positions.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1841"><code>src&#x2F;jquery.gridster.js:1841</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1927"><code>src&#x2F;jquery.gridster.js:1927</code></a>
</p>
@@ -7067,7 +7232,7 @@ mapped array of positions.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l953"><code>src&#x2F;jquery.gridster.js:953</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l997"><code>src&#x2F;jquery.gridster.js:997</code></a>
</p>
@@ -7194,7 +7359,7 @@ mapped array of positions.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l597"><code>src&#x2F;jquery.gridster.js:597</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l621"><code>src&#x2F;jquery.gridster.js:621</code></a>
</p>
@@ -7315,7 +7480,7 @@ mapped array of positions.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l686"><code>src&#x2F;jquery.gridster.js:686</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l710"><code>src&#x2F;jquery.gridster.js:710</code></a>
</p>
@@ -7420,7 +7585,7 @@ each widget) in ascending way.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l706"><code>src&#x2F;jquery.gridster.js:706</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l750"><code>src&#x2F;jquery.gridster.js:750</code></a>
</p>
@@ -7476,6 +7641,111 @@ coords of each widget) in ascending way.</p>
</div>
<div id="method_sort_by_row_asc" class="method item">
<h3 class="name"><code>sort_by_row_asc</code></h3>
<div class="args">
<span class="paren">(</span><ul class="args-list inline commas">
<li class="arg">
<code>widgets</code>
</li>
</ul><span class="paren">)</span>
</div>
<span class="returns-inline">
<span class="type">Array</span>
</span>
<div class="meta">
<p>
Defined in
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l730"><code>src&#x2F;jquery.gridster.js:730</code></a>
</p>
</div>
<div class="description">
<p>Sorts an Array of grid coords objects (representing the grid coords of
each widget) placing first the empty cells upper left.</p>
</div>
<div class="params">
<h4>Parameters:</h4>
<ul class="params-list">
<li class="param">
<code class="param-name">widgets</code>
<span class="type">Array</span>
<div class="param-description">
<p>Array of grid coords objects</p>
</div>
</li>
</ul>
</div>
<div class="returns">
<h4>Returns:</h4>
<div class="returns-description">
<span class="type">Array</span>:
Returns the array sorted.
</div>
</div>
</div>
@@ -7525,7 +7795,7 @@ coords of each widget) in ascending way.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l726"><code>src&#x2F;jquery.gridster.js:726</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l770"><code>src&#x2F;jquery.gridster.js:770</code></a>
</p>
@@ -7636,7 +7906,7 @@ each widget) in descending way.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l305"><code>src&#x2F;jquery.gridster.js:305</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l308"><code>src&#x2F;jquery.gridster.js:308</code></a>
</p>
@@ -7759,7 +8029,7 @@ the grid coords object passed in the <code>grid_data</code> param.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1491"><code>src&#x2F;jquery.gridster.js:1491</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l1544"><code>src&#x2F;jquery.gridster.js:1544</code></a>
</p>
@@ -7863,7 +8133,7 @@ the grid coords object passed in the <code>grid_data</code> param.</p>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l650"><code>src&#x2F;jquery.gridster.js:650</code></a>
<a href="..&#x2F;files&#x2F;src_jquery.gridster.js.html#l674"><code>src&#x2F;jquery.gridster.js:674</code></a>
</p>

View File

@@ -19,6 +19,15 @@
"fors": {},
"namespaces": {}
},
"src/jquery.draggable.js": {
"name": "src/jquery.draggable.js",
"modules": {},
"classes": {
"Draggable": 1
},
"fors": {},
"namespaces": {}
},
"src/jquery.gridster.js": {
"name": "src/jquery.gridster.js",
"modules": {},
@@ -104,7 +113,7 @@
],
"file": "src/jquery.coords.js",
"line": 10,
"description": "Coords description",
"description": "Coords",
"params": [
{
"name": "obj",
@@ -114,6 +123,19 @@
],
"is_constructor": 1
},
"Draggable": {
"name": "Draggable",
"shortname": "Draggable",
"classitems": [],
"plugins": [],
"extensions": [],
"plugin_for": [],
"extension_for": [],
"file": "src/jquery.draggable.js",
"line": 24,
"description": "Draggable",
"is_constructor": 1
},
"Gridster": {
"name": "Gridster",
"shortname": "Gridster",
@@ -123,7 +145,7 @@
"plugin_for": [],
"extension_for": [],
"file": "src/jquery.gridster.js",
"line": 70,
"line": 33,
"uses": [
"Coords",
"Collision"
@@ -215,7 +237,31 @@
"classitems": [
{
"file": "src/jquery.gridster.js",
"line": 140,
"line": 105,
"description": "Disable dragging.",
"itemtype": "method",
"name": "enable",
"return": {
"description": "Returns the instance of the Gridster Class.",
"type": "Class"
},
"class": "Gridster"
},
{
"file": "src/jquery.gridster.js",
"line": 117,
"description": "Enable dragging.",
"itemtype": "method",
"name": "enable",
"return": {
"description": "Returns the instance of the Gridster Class.",
"type": "Class"
},
"class": "Gridster"
},
{
"file": "src/jquery.gridster.js",
"line": 129,
"description": "Add a new widget to the grid.",
"itemtype": "method",
"name": "add_widget",
@@ -237,14 +283,14 @@
}
],
"return": {
"description": "Returns the jQuery wrapped HTMLElement representing\n the widget that was just created.",
"description": "Returns the jQuery wrapped HTMLElement representing.\n the widget that was just created.",
"type": "HTMLElement"
},
"class": "Gridster"
},
{
"file": "src/jquery.gridster.js",
"line": 173,
"line": 159,
"description": "Get the most left column below to add a new widget.",
"itemtype": "method",
"name": "next_position",
@@ -268,7 +314,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 217,
"line": 201,
"description": "Remove a widget from the grid.",
"itemtype": "method",
"name": "remove_widget",
@@ -287,7 +333,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 243,
"line": 231,
"description": "Returns a serialized array of the widgets in the grid.",
"itemtype": "method",
"name": "serialize",
@@ -307,7 +353,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 265,
"line": 253,
"description": "Returns a serialized array of the widgets that have changed their position.",
"itemtype": "method",
"name": "serialize_changed",
@@ -319,7 +365,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 277,
"line": 265,
"description": "Creates the grid coords object representing the widget a add it to the\nmapped array of positions.",
"itemtype": "method",
"name": "register_widget",
@@ -331,7 +377,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 305,
"line": 308,
"description": "Update in the mapped array of positions the value of cells represented by\nthe grid coords object passed in the `grid_data` param.",
"params": [
{
@@ -355,7 +401,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 326,
"line": 329,
"description": "Remove a widget from the mapped array of positions.",
"itemtype": "method",
"name": "remove_from_gridmap",
@@ -374,7 +420,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 339,
"line": 342,
"description": "Add a widget to the mapped array of positions.",
"itemtype": "method",
"name": "add_to_gridmap",
@@ -398,7 +444,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 361,
"line": 364,
"description": "Make widgets draggable. It Wraps the jQuery UI Draggable Plugin.",
"itemtype": "method",
"name": "draggable",
@@ -410,7 +456,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 395,
"line": 400,
"description": "This function is executed when the player begins to be dragged.",
"itemtype": "method",
"name": "on_start_drag",
@@ -430,7 +476,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 444,
"line": 452,
"description": "This function is executed when the player is being dragged.",
"itemtype": "method",
"name": "on_drag",
@@ -450,7 +496,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 470,
"line": 489,
"description": "This function is executed when the player stops being dragged.",
"itemtype": "method",
"name": "on_stop_drag",
@@ -470,7 +516,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 521,
"line": 545,
"description": "Executes the callbacks passed as arguments when a column begins to be\noverlapped or stops being overlapped.",
"params": [
{
@@ -494,7 +540,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 561,
"line": 585,
"description": "Executes the callbacks passed as arguments when a row starts to be\noverlapped or stops being overlapped.",
"params": [
{
@@ -518,7 +564,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 597,
"line": 621,
"description": "Sets the current position of the player",
"params": [
{
@@ -542,7 +588,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 650,
"line": 674,
"description": "See which of the widgets in the $widgets param collection can go to\na upper row and which not.",
"itemtype": "method",
"name": "widgets_contraints",
@@ -561,7 +607,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 686,
"line": 710,
"description": "Sorts an Array of grid coords objects (representing the grid coords of\neach widget) in ascending way.",
"itemtype": "method",
"name": "sort_by_row_asc",
@@ -580,7 +626,26 @@
},
{
"file": "src/jquery.gridster.js",
"line": 706,
"line": 730,
"description": "Sorts an Array of grid coords objects (representing the grid coords of\neach widget) placing first the empty cells upper left.",
"itemtype": "method",
"name": "sort_by_row_asc",
"params": [
{
"name": "widgets",
"description": "Array of grid coords objects",
"type": "Array"
}
],
"return": {
"description": "Returns the array sorted.",
"type": "Array"
},
"class": "Gridster"
},
{
"file": "src/jquery.gridster.js",
"line": 750,
"description": "Sorts an Array of grid coords objects by column (representing the grid\ncoords of each widget) in ascending way.",
"itemtype": "method",
"name": "sort_by_row_asc",
@@ -599,7 +664,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 726,
"line": 770,
"description": "Sorts an Array of grid coords objects (representing the grid coords of\neach widget) in descending way.",
"itemtype": "method",
"name": "sort_by_row_desc",
@@ -618,7 +683,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 745,
"line": 789,
"description": "Sorts an Array of grid coords objects (representing the grid coords of\neach widget) in descending way.",
"itemtype": "method",
"name": "manage_movements",
@@ -647,7 +712,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 791,
"line": 835,
"description": "Determines if there is a widget in the row and col given. Or if the\nHTMLElement passed as first argument is the player.",
"itemtype": "method",
"name": "is_player",
@@ -672,7 +737,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 808,
"line": 852,
"description": "Determines if the widget that is being dragged is currently over the row\nand col given.",
"itemtype": "method",
"name": "is_player_in",
@@ -696,7 +761,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 823,
"line": 867,
"description": "Determines if the placeholder is currently over the row and col given.",
"itemtype": "method",
"name": "is_placeholder_in",
@@ -720,7 +785,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 837,
"line": 881,
"description": "Determines if the placeholder is currently over the column given.",
"itemtype": "method",
"name": "is_placeholder_in_col",
@@ -739,7 +804,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 850,
"line": 894,
"description": "Determines if the cell represented by col and row params is empty.",
"itemtype": "method",
"name": "is_empty",
@@ -763,7 +828,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 869,
"line": 913,
"description": "Determines if the cell represented by col and row params is occupied.",
"itemtype": "method",
"name": "is_occupied",
@@ -787,7 +852,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 889,
"line": 933,
"description": "Determines if there is a widget in the cell represented by col/row params.",
"itemtype": "method",
"name": "is_widget",
@@ -811,7 +876,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 914,
"line": 958,
"description": "Determines if there is a widget in the cell represented by col/row\nparams and if this is under the widget that is being dragged.",
"itemtype": "method",
"name": "is_widget_under_player",
@@ -835,7 +900,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 931,
"line": 975,
"description": "Get widgets overlapping with the player.",
"itemtype": "method",
"name": "get_widgets_under_player",
@@ -847,7 +912,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 953,
"line": 997,
"description": "Put placeholder at the row and column specified.",
"itemtype": "method",
"name": "set_placeholder",
@@ -871,7 +936,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 995,
"line": 1048,
"description": "Determines whether the player can move to a position above.",
"itemtype": "method",
"name": "can_go_player_up",
@@ -890,7 +955,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 1044,
"line": 1097,
"description": "Determines whether a widget can move to a position above.",
"itemtype": "method",
"name": "can_go_widget_up",
@@ -909,7 +974,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 1095,
"line": 1148,
"description": "Search a valid row for the widget represented by `widget_grid_data' in\nthe `upper_rows` array. Iteration starts from row specified in `min_row`.",
"itemtype": "method",
"name": "get_valid_rows",
@@ -938,7 +1003,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 1173,
"line": 1226,
"description": "Get widgets overlapping with the player.",
"itemtype": "method",
"name": "get_widgets_overlapped",
@@ -950,7 +1015,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 1206,
"line": 1259,
"description": "This callback is executed when the player begins to collide with a column.",
"itemtype": "method",
"name": "on_start_overlapping_column",
@@ -969,7 +1034,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 1218,
"line": 1271,
"description": "A callback executed when the player begins to collide with a row.",
"itemtype": "method",
"name": "on_start_overlapping_row",
@@ -988,7 +1053,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 1230,
"line": 1283,
"description": "A callback executed when the the player ends to collide with a column.",
"itemtype": "method",
"name": "on_stop_overlapping_column",
@@ -1007,7 +1072,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 1248,
"line": 1301,
"description": "This callback is executed when the player ends to collide with a row.",
"itemtype": "method",
"name": "on_stop_overlapping_row",
@@ -1026,7 +1091,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 1268,
"line": 1321,
"description": "Move a widget to a specific row. The cell or cells must be empty.\nIf the widget has widgets below, all of these widgets will be moved also\nif they can.",
"itemtype": "method",
"name": "move_widget_to",
@@ -1045,7 +1110,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 1311,
"line": 1364,
"description": "Move up the specified widget and all below it.",
"itemtype": "method",
"name": "move_widget_up",
@@ -1070,7 +1135,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 1357,
"line": 1410,
"description": "Move down the specified widget and all below it.",
"itemtype": "method",
"name": "move_widget_down",
@@ -1094,7 +1159,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 1402,
"line": 1455,
"description": "Check if the widget can move to the specified row, else returns the\nupper row possible.",
"itemtype": "method",
"name": "can_go_up_to_row",
@@ -1123,7 +1188,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 1491,
"line": 1544,
"description": "Get widgets below a widget.",
"itemtype": "method",
"name": "widgets_below",
@@ -1142,7 +1207,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 1520,
"line": 1573,
"description": "Update the array of mapped positions with the new player position.",
"itemtype": "method",
"name": "set_cells_player_occupies",
@@ -1166,7 +1231,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 1537,
"line": 1590,
"description": "Remove from the array of mapped positions the reference to the player.",
"itemtype": "method",
"name": "empty_cells_player_occupies",
@@ -1178,7 +1243,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 1574,
"line": 1627,
"description": "Check if it's possible to move a widget to a specific col/row. It takes\ninto account the dimensions (`size_y` and `size_x` attrs. of the grid coords\n object) the widget occupies.",
"itemtype": "method",
"name": "can_move_to",
@@ -1207,7 +1272,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 1608,
"line": 1667,
"description": "Given the leftmost column returns all columns that are overlapping with the player.",
"itemtype": "method",
"name": "get_targeted_columns",
@@ -1227,7 +1292,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 1626,
"line": 1685,
"description": "Given the upper row returns all rows that are overlapping with the player.",
"itemtype": "method",
"name": "get_targeted_rows",
@@ -1247,7 +1312,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 1643,
"line": 1702,
"description": "Get all columns and rows that a widget occupies.",
"itemtype": "method",
"name": "get_cells_occupied",
@@ -1266,7 +1331,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 1671,
"line": 1730,
"description": "Iterate over the cells occupied by a widget executing a function for\neach one.",
"itemtype": "method",
"name": "for_each_cell_occupied",
@@ -1290,7 +1355,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 1692,
"line": 1751,
"description": "Iterate over the columns occupied by a widget executing a function for\neach one.",
"itemtype": "method",
"name": "for_each_column_occupied",
@@ -1314,7 +1379,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 1711,
"line": 1770,
"description": "Iterate over the rows occupied by a widget executing a function for\neach one.",
"itemtype": "method",
"name": "for_each_row_occupied",
@@ -1338,7 +1403,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 1777,
"line": 1836,
"description": "Iterate over each widget above the column and row specified.",
"itemtype": "method",
"name": "for_each_widget_above",
@@ -1367,7 +1432,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 1793,
"line": 1852,
"description": "Iterate over each widget below the column and row specified.",
"itemtype": "method",
"name": "for_each_widget_below",
@@ -1396,7 +1461,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 1809,
"line": 1868,
"description": "Returns the highest occupied cell in the grid.",
"itemtype": "method",
"name": "get_highest_occupied_cell",
@@ -1408,7 +1473,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 1841,
"line": 1927,
"description": "Set the current height of the parent grid.",
"itemtype": "method",
"name": "set_dom_grid_height",
@@ -1420,7 +1485,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 1855,
"line": 1941,
"description": "It generates the neccessary styles to position the widgets.",
"itemtype": "method",
"name": "generate_stylesheet",
@@ -1444,7 +1509,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 1899,
"line": 2004,
"description": "Injects the given CSS as string to the head of the document.",
"itemtype": "method",
"name": "add_style_tag",
@@ -1463,7 +1528,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 1922,
"line": 2027,
"description": "Generates a faux grid to collide with it when a widget is dragged and\ndetect row or column that we want to go.",
"itemtype": "method",
"name": "generate_faux_grid",
@@ -1487,7 +1552,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 1958,
"line": 2063,
"description": "Recalculates the offsets for the faux grid. You need to use it when\nthe browser is resized.",
"itemtype": "method",
"name": "recalculate_faux_grid",
@@ -1499,7 +1564,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 1982,
"line": 2087,
"description": "Get all widgets in the DOM and register them.",
"itemtype": "method",
"name": "get_widgets_from_DOM",
@@ -1511,7 +1576,7 @@
},
{
"file": "src/jquery.gridster.js",
"line": 1996,
"line": 2101,
"description": "Calculate columns and rows to be set based on the configuration\n parameters, grid dimensions, etc ...",
"itemtype": "method",
"name": "generate_grid_and_stylesheet",

View File

@@ -46,6 +46,8 @@
<li><a href="..&#x2F;classes/Coords.html">Coords</a></li>
<li><a href="..&#x2F;classes/Draggable.html">Draggable</a></li>
<li><a href="..&#x2F;classes/Gridster.html">Gridster</a></li>
</ul>
@@ -211,18 +213,18 @@
}
};
fn.find_collisions = function(){
fn.find_collisions = function(player_data_coords){
var self = this;
var colliders_coords = [];
var colliders_data = [];
var $colliders = (this.colliders || this.$colliders);
var count = $colliders.length;
var player_coords = self.$element.coords().update(player_data_coords || false).get();
while(count--){
var $collider = self.$colliders ? $($colliders[count]) : $colliders[count];
var player_coords = self.$element.coords().update().get();
var $collider_coords_ins = ($collider.isCoords) ?
$collider.update() : $collider.coords();
$collider : $collider.coords();
var collider_coords = $collider_coords_ins.get();
var overlaps = self.overlaps(player_coords, collider_coords);
@@ -262,8 +264,8 @@
};
fn.get_closest_colliders = function(){
var colliders = this.find_collisions();
fn.get_closest_colliders = function(player_data_coords){
var colliders = this.find_collisions(player_data_coords);
var min_area = 100;
colliders.sort(function(a, b){

View File

@@ -46,6 +46,8 @@
<li><a href="..&#x2F;classes/Coords.html">Coords</a></li>
<li><a href="..&#x2F;classes/Draggable.html">Draggable</a></li>
<li><a href="..&#x2F;classes/Gridster.html">Gridster</a></li>
</ul>
@@ -101,7 +103,7 @@
;(function($, window, document, undefined){
&#x2F;**
* Coords description
* Coords
*
* @class Coords
* @param {HTMLElement|Object} obj HTMLElement or a literal Object with the left, top, width and height properties.
@@ -127,12 +129,20 @@
this.original_coords = this.get();
};
fn.set = function() {
fn.set = function(update, not_update_offsets) {
var el = this.el;
if (el) {
this.data = el.offset();
this.data.width || (this.data.width = el.width());
this.data.height || (this.data.height = el.height());
if (el &amp;&amp; !update) {
this.data = {} || el.offset();
this.data.width = el.width();
this.data.height = el.height();
};
if (el &amp;&amp; update &amp;&amp; !not_update_offsets) {
var offset = el.offset();
this.data.top = offset.top;
this.data.left = offset.left;
}
var d = this.data;
@@ -150,19 +160,23 @@
return this;
};
fn.update = function(data){
if (!data &amp;&amp; !this.el) {
return this;
}
if (data) {
var new_data = $.extend(this.data, data);
var new_data = $.extend({}, this.data, data);
this.data = new_data;
return this.set(true, true);
}
this.set();
this.set(true);
return this;
};
fn.get = function(){
return this.coords;
};

View File

@@ -0,0 +1,338 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>src&#x2F;jquery.draggable.js</title>
<link rel="stylesheet" href="http:&#x2F;&#x2F;yui.yahooapis.com&#x2F;3.5.1&#x2F;build&#x2F;cssgrids&#x2F;cssgrids-min.css">
<link rel="stylesheet" href="..&#x2F;assets/vendor/prettify/prettify-min.css">
<link rel="stylesheet" href="..&#x2F;assets/css/main.css" id="site_styles">
<link rel="shortcut icon" type="image/png" href="..&#x2F;assets/favicon.png">
<script src="http:&#x2F;&#x2F;yui.yahooapis.com&#x2F;combo?3.5.1&#x2F;build&#x2F;yui&#x2F;yui-min.js"></script>
</head>
<body class="yui3-skin-sam">
<div id="doc">
<div id="hd" class="yui3-g header">
<div class="yui3-u-3-4">
<!-- <h1><img src="..&#x2F;assets/css/logo.png" title=""></h1> -->
<h1><img src="http://ducksboard.com/wp-content/themes/blog-theme-ducksboard/images/ducksboard.png" title=""></h1>
</div>
<div class="yui3-u-1-4 version">
<em>API Docs for: </em>
</div>
</div>
<div id="bd" class="yui3-g">
<div class="yui3-u-1-4">
<div id="docs-sidebar" class="sidebar apidocs">
<div id="api-list">
<h2 class="off-left">APIs</h2>
<div id="api-tabview" class="tabview">
<ul class="tabs">
<li><a href="#api-classes">Classes</a></li>
<li><a href="#api-modules">Modules</a></li>
</ul>
<div id="api-tabview-filter">
<input type="search" id="api-filter" placeholder="Type to filter APIs">
</div>
<div id="api-tabview-panel">
<ul id="api-classes" class="apis classes">
<li><a href="..&#x2F;classes/Collision.html">Collision</a></li>
<li><a href="..&#x2F;classes/Coords.html">Coords</a></li>
<li><a href="..&#x2F;classes/Draggable.html">Draggable</a></li>
<li><a href="..&#x2F;classes/Gridster.html">Gridster</a></li>
</ul>
<ul id="api-modules" class="apis modules">
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="yui3-u-3-4">
<div id="api-options">
Show:
<label for="api-show-inherited">
<input type="checkbox" id="api-show-inherited" checked>
Inherited
</label>
<label for="api-show-protected">
<input type="checkbox" id="api-show-protected">
Protected
</label>
<label for="api-show-private">
<input type="checkbox" id="api-show-private">
Private
</label>
<label for="api-show-deprecated">
<input type="checkbox" id="api-show-deprecated">
Deprecated
</label>
</div>
<div class="apidocs">
<div id="docs-main">
<div class="content">
<h1 class="file-heading">File: src&#x2F;jquery.draggable.js</h1>
<div class="file">
<pre class="code prettyprint linenums">
&#x2F;*
* jquery.draggable
* https:&#x2F;&#x2F;github.com&#x2F;ducksboard&#x2F;gridster.js
*
* Copyright (c) 2012 ducksboard
* Licensed under the MIT, GPL licenses.
*&#x2F;
;(function($, window, document, undefined){
var defaults = {
items: &#x27;.gs_w&#x27;,
distance: 1,
limit: true,
offset_left: 0,
drag: function(e){},
start : function(e, ui){},
stop : function(e){}
};
var $body = $(document.body);
&#x2F;**
* Draggable
*
* @class Draggable
* @constructor
*&#x2F;
function Draggable(element, options) {
this.options = $.extend(defaults, options);
this.$container = $(element);
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.$container.css(&#x27;position&#x27;, &#x27;relative&#x27;);
this.enable();
};
fn.get_actual_pos = function($el) {
var pos = $el.position();
return pos;
};
fn.get_mouse_pos = function(e) {
return {
left: e.clientX,
top: e.clientY
};
};
fn.drag_handler = function(e) {
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(&#x27;mousemove.draggable&#x27;, 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 &gt; self.options.distance || diff_y &gt; 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 === &#x27;clone&#x27;) {
this.$helper = this.$player.clone().appendTo(this.$container).addClass(&#x27;helper&#x27;);
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 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;
if (this.options.limit) {
if (left &gt; this.player_max_left) {
left = this.player_max_left;
}else if(left &lt; this.player_min_left) {
left = this.player_min_left;
}
};
return {
left: left,
top: top
}
};
fn.on_dragmove = function(e) {
var offset = this.get_offset(e);
(this.helper ? this.$helper : this.$player).css({
&#x27;position&#x27;: &#x27;absolute&#x27;,
&#x27;left&#x27; : offset.left,
&#x27;top&#x27; : offset.top
});
var ui = {
&#x27;position&#x27;: {
&#x27;left&#x27;: offset.left,
&#x27;top&#x27;: offset.top
}
};
if (this.options.drag) {
this.options.drag.call(this.$player, e, ui);
}
return false;
};
fn.on_dragstop = function(e) {
var offset = this.get_offset(e);
this.drag_start = false;
var ui = {
&#x27;position&#x27;: {
&#x27;left&#x27;: offset.left,
&#x27;top&#x27;: offset.top
}
}
if (this.options.stop) {
this.options.stop.call(this.$player, e, ui);
}
if (this.helper) {
this.$helper.remove();
}
return false;
};
fn.enable = function(){
this.$container.on(&#x27;mousedown.draggable&#x27;, this.options.items, $.proxy(this.drag_handler, this));
$body.on(&#x27;mouseup.draggable&#x27;, $.proxy(function(e) {
this.is_dragging = false;
$body.off(&#x27;mousemove.draggable&#x27;);
if (this.drag_start) {
this.on_dragstop(e);
}
}, this));
};
fn.disable = function(){
this.$container.off(&#x27;mousedown.draggable&#x27;);
$body.off(&#x27;mouseup.draggable&#x27;);
};
fn.destroy = function(){
this.disable();
$.removeData(this.$container, &#x27;draggable&#x27;);
};
&#x2F;&#x2F;jQuery adapter
$.fn.draggable = function ( options ) {
return this.each(function () {
if (!$.data(this, &#x27;draggable&#x27;)) {
$.data(this, &#x27;draggable&#x27;, new Draggable( this, options ));
}
});
};
}(jQuery, window, document));
</pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="..&#x2F;assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>
<script src="..&#x2F;assets/js/yui-prettify.js"></script>
<script src="..&#x2F;assets/../api.js"></script>
<script src="..&#x2F;assets/js/api-filter.js"></script>
<script src="..&#x2F;assets/js/api-list.js"></script>
<script src="..&#x2F;assets/js/api-search.js"></script>
<script src="..&#x2F;assets/js/apidocs.js"></script>
</body>
</html>

View File

@@ -46,6 +46,8 @@
<li><a href="..&#x2F;classes/Coords.html">Coords</a></li>
<li><a href="..&#x2F;classes/Draggable.html">Draggable</a></li>
<li><a href="..&#x2F;classes/Gridster.html">Gridster</a></li>
</ul>
@@ -109,6 +111,7 @@
min_cols: 1,
min_rows: 10,
autogenerate_stylesheet: true,
avoid_overlapped_widgets: true,
serialize_params: function($w, wgd) {
return {
col: wgd.col,
@@ -116,47 +119,9 @@
};
},
collision: {},
draggable: {}
};
&#x2F;* Debounce and throttle functions taken from underscore.js *&#x2F;
var debounce = function(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
if (immediate &amp;&amp; !timeout) func.apply(context, args);
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
};
var throttle = function(func, wait) {
var context, args, timeout, throttling, more, result;
var whenDone = debounce(
function(){ more = throttling = false; }, wait, true);
return function() {
context = this; args = arguments;
var later = function() {
timeout = null;
if (more) func.apply(context, args);
whenDone();
};
if (!timeout) timeout = setTimeout(later, wait);
if (throttling) {
more = true;
} else {
result = func.apply(context, args);
draggable: {
distance: 4
}
whenDone();
throttling = true;
return result;
};
};
@@ -216,6 +181,8 @@
this.init();
}
Gridster.generated_stylesheets = [];
var fn = Gridster.prototype;
fn.init = function() {
@@ -230,6 +197,30 @@
};
&#x2F;**
* Disable dragging.
*
* @method enable
* @return {Class} Returns the instance of the Gridster Class.
*&#x2F;
fn.disable = function(){
this.drag_api.disable();
return this;
}
&#x2F;**
* Enable dragging.
*
* @method enable
* @return {Class} Returns the instance of the Gridster Class.
*&#x2F;
fn.enable = function(){
this.drag_api.enable();
return this;
}
&#x2F;**
* Add a new widget to the grid.
*
@@ -237,7 +228,7 @@
* @param {String} html The string representing the HTML of the widget.
* @param {Number} size_x The nº of rows the widget occupies horizontally.
* @param {Number} size_y The nº of columns the widget occupies vertically.
* @return {HTMLElement} Returns the jQuery wrapped HTMLElement representing
* @return {HTMLElement} Returns the jQuery wrapped HTMLElement representing.
* the widget that was just created.
*&#x2F;
fn.add_widget = function(html, size_x, size_y) {
@@ -254,12 +245,9 @@
this.register_widget($w);
this.$widgets.draggable(&#x27;destroy&#x27;);
this.draggable();
this.set_dom_grid_height();
$w.fadeIn();
return $w.fadeIn();
};
@@ -299,9 +287,7 @@
}
if (valid_pos.length) {
var next_position = this.sort_by_row_desc(valid_pos);
next_position = this.sort_by_col_asc(next_position)[0];
return next_position;
return this.sort_by_row_and_col_asc(valid_pos)[0];
}
return false;
};
@@ -314,7 +300,7 @@
* @param {HTMLElement} el The jQuery wrapped HTMLElement you want to remove.
* @return {Class} Returns the instance of the Gridster Class.
*&#x2F;
fn.remove_widget = function(el) {
fn.remove_widget = function(el, callback) {
var $el = el instanceof jQuery ? el : $(el);
var wgd = $el.coords().grid;
@@ -329,6 +315,10 @@
$nexts.each($.proxy(function(i, widget){
this.move_widget_up( $(widget), wgd.size_y );
}, this));
if (callback) {
callback.apply(this, el);
};
}, this));
};
@@ -375,7 +365,8 @@
* @return {Array} Returns the instance of the Gridster class.
*&#x2F;
fn.register_widget = function($el) {
var widget_grid_data = {
var wgd = {
&#x27;col&#x27;: parseInt($el.attr(&#x27;data-col&#x27;), 10),
&#x27;row&#x27;: parseInt($el.attr(&#x27;data-row&#x27;), 10),
&#x27;size_x&#x27;: parseInt($el.attr(&#x27;data-sizex&#x27;), 10),
@@ -383,13 +374,27 @@
&#x27;el&#x27;: $el
};
if (this.options.avoid_overlapped_widgets &amp;&amp;
!this.can_move_to(
{ size_x: wgd.size_x, size_y: wgd.size_y }, wgd.col, wgd.row)
) {
wgd = this.next_position(wgd.size_x, wgd.size_y);
wgd.el = $el;
$el.attr({
&#x27;data-col&#x27;: wgd.col,
&#x27;data-row&#x27;: wgd.row,
&#x27;data-sizex&#x27;: wgd.size_x,
&#x27;data-sizey&#x27;: wgd.size_y
});
};
&#x2F;&#x2F; attach Coord object to player data-coord attribute
$el.data(&#x27;coords&#x27;, $el.coords());
&#x2F;&#x2F; Extend Coord object with grid position info
$el.data(&#x27;coords&#x27;).grid = widget_grid_data;
$el.data(&#x27;coords&#x27;).grid = wgd;
this.add_to_gridmap(widget_grid_data, $el);
this.add_to_gridmap(wgd, $el);
this.widgets.push($el);
return this;
};
@@ -460,27 +465,29 @@
fn.draggable = function() {
var self = this;
var draggable_options = $.extend(true, {}, this.options.draggable, {
&#x2F;&#x2F; containment : this.$wrapper,
offset_left: this.options.widget_margins[0],
items: &#x27;.gs_w&#x27;,
start: function(event, ui) {
self.$widgets.filter(&#x27;.player-revert&#x27;).removeClass(&#x27;player-revert&#x27;);
self.$player = $(this);
self.$helper = self.options.draggable.helper === &#x27;clone&#x27; ?
$(ui.helper) : self.$player;
self.helper = !self.$helper.is(self.$player);
self.on_start_drag.call(self, event, ui);
self.$el.trigger(&#x27;gridster:dragstart&#x27;);
},
stop: function(event, ui) {
self.on_stop_drag.call(self, ui);
self.on_stop_drag.call(self, event, ui);
self.$el.trigger(&#x27;gridster:dragstop&#x27;);
},
drag: throttle(function(event, ui) {
drag: function(event, ui) {
self.on_drag.call(self, event, ui);
self.$el.trigger(&#x27;gridster:drag&#x27;);
}, 100, true)
}
});
this.$widgets.draggable(draggable_options);
this.drag_api = this.$el.draggable(draggable_options).data(&#x27;draggable&#x27;);
return this;
};
@@ -494,8 +501,10 @@
* See http:&#x2F;&#x2F;jqueryui.com&#x2F;demos&#x2F;draggable&#x2F; for more info.
*&#x2F;
fn.on_start_drag = function(event, ui) {
this.$helper.add(this.$player).add(this.$wrapper).addClass(&#x27;dragging&#x27;);
this.$player.addClass(&#x27;player&#x27;);
this.$wrapper.addClass(&#x27;dragging&#x27;);
this.player_grid_data = this.$player.coords().grid;
this.placeholder_grid_data = $.extend({}, this.player_grid_data);
@@ -514,8 +523,9 @@
this.last_cols = [];
this.last_rows = [];
&#x2F;&#x2F; see jquery.collision.js
this.drag_api = this.$helper.collision(
this.collision_api = this.$helper.collision(
colliders, this.options.collision);
this.$preview_holder = $(&#x27;&lt;li &#x2F;&gt;&#x27;, {
@@ -543,7 +553,11 @@
* See http:&#x2F;&#x2F;jqueryui.com&#x2F;demos&#x2F;draggable&#x2F; for more info.
*&#x2F;
fn.on_drag = function(event, ui) {
this.colliders_data = this.drag_api.get_closest_colliders();
var abs_offset = {
left: ui.position.left + this.baseX,
top: ui.position.top + this.baseY
}
this.colliders_data = this.collision_api.get_closest_colliders(abs_offset);
this.on_overlapped_column_change(
this.on_start_overlapping_column,
@@ -555,6 +569,13 @@
this.on_stop_overlapping_row
);
if (this.helper &amp;&amp; this.$player) {
this.$player.css({
&#x27;left&#x27;: ui.position.left,
&#x27;top&#x27;: ui.position.top
});
}
if (this.options.draggable.drag) {
this.options.draggable.drag.call(this, event, ui);
}
@@ -569,7 +590,11 @@
* See http:&#x2F;&#x2F;jqueryui.com&#x2F;demos&#x2F;draggable&#x2F; for more info.
*&#x2F;
fn.on_stop_drag = function(event, ui) {
this.colliders_data = this.drag_api.get_closest_colliders();
this.$helper.add(this.$player).add(this.$wrapper).removeClass(&#x27;dragging&#x27;);
ui.position.left = ui.position.left + this.baseX;
ui.position.top = ui.position.top + this.baseY;
this.colliders_data = this.collision_api.get_closest_colliders(ui.position);
this.on_overlapped_column_change(
this.on_start_overlapping_column,
@@ -581,13 +606,14 @@
this.on_stop_overlapping_row
);
this.$player.add(this.$helper).attr({
this.$player
.addClass(&#x27;player-revert&#x27;).removeClass(&#x27;player&#x27;).attr({
&#x27;data-col&#x27;: this.placeholder_grid_data.col,
&#x27;data-row&#x27;: this.placeholder_grid_data.row
}).css({
&#x27;left&#x27;: &#x27;&#x27;,
&#x27;top&#x27;: &#x27;&#x27;
}).removeClass(&#x27;player&#x27;);
});
this.$changed = this.$changed.add(this.$player);
@@ -796,6 +822,26 @@
};
&#x2F;**
* Sorts an Array of grid coords objects (representing the grid coords of
* each widget) placing first the empty cells upper left.
*
* @method sort_by_row_asc
* @param {Array} widgets Array of grid coords objects
* @return {Array} Returns the array sorted.
*&#x2F;
fn.sort_by_row_and_col_asc = function(widgets) {
widgets = widgets.sort(function(a, b){
if (a.row &gt; b.row || a.row == b.row &amp;&amp; a.col &gt; b.col) {
return 1;
}
return -1;
});
return widgets;
};
&#x2F;**
* Sorts an Array of grid coords objects by column (representing the grid
* coords of each widget) in ascending way.
@@ -1061,12 +1107,21 @@
size_y: phgd.size_y,
size_x: phgd.size_x
});
&#x2F;&#x2F;Prevents widgets go out of the grid
var right_col = (col + phgd.size_x - 1);
if (right_col &gt; this.cols) {
col = col - (right_col - col);
};
var moved_down = this.placeholder_grid_data.row &lt; row;
var changed_column = this.placeholder_grid_data.col !== col;
this.placeholder_grid_data.col = col;
this.placeholder_grid_data.row = row;
this.cells_occupied_by_placeholder = this.get_cells_occupied(
this.placeholder_grid_data);
@@ -1687,6 +1742,12 @@
};
var result = true;
&#x2F;&#x2F;Prevents widgets go out of the grid
var right_col = col + widget_grid_data.size_x - 1;
if (right_col &gt; this.cols) {
return false;
};
this.for_each_cell_occupied(future_wd, function(tcol, trow){
var $tw = this.is_widget(tcol, trow);
if ($tw &amp;&amp; (!widget_grid_data.el || $tw.is($w))) {
@@ -1931,6 +1992,33 @@
};
fn.get_widgets_from = function(col, row) {
var ga = this.gridmap;
var $widgets = $();
if (col) {
$widgets = $widgets.add(
this.$widgets.filter(function(){
var tcol = $(this).attr(&#x27;data-col&#x27;);
return (tcol == col || tcol &gt; col);
})
);
};
if (row) {
$widgets = $widgets.add(
this.$widgets.filter(function(){
var trow = $(this).attr(&#x27;data-row&#x27;);
return (trow == row || trow &gt; row);
})
);
};
return $widgets;
}
&#x2F;**
* Set the current height of the parent grid.
*
@@ -1953,7 +2041,7 @@
* @param {Number} cols Number of rows.
* @return {Object} Returns the instance of the Gridster class.
*&#x2F;
fn.generate_stylesheet = function(rows, cols) {
fn.generate_stylesheet = function(opts) {
var styles = &#x27;&#x27;;
var extra_cells = 10;
var max_size_y = 6;
@@ -1961,28 +2049,47 @@
var i;
var rules;
opts || (opts = {});
opts.cols || (opts.cols = this.cols);
opts.rows || (opts.rows = this.rows);
opts.namespace || (opts.namespace = &#x27;&#x27;);
opts.widget_base_dimensions || (opts.widget_base_dimensions = this.options.widget_base_dimensions);
opts.widget_margins || (opts.widget_margins = this.options.widget_margins);
opts.min_widget_width = (opts.widget_margins[0] * 2) + opts.widget_base_dimensions[0];
opts.min_widget_height = (opts.widget_margins[1] * 2) + opts.widget_base_dimensions[1];
var serialized_opts = $.param(opts);
&#x2F;&#x2F; don&#x27;t duplicate stylesheets for the same configuration
if ($.inArray(serialized_opts, Gridster.generated_stylesheets) &gt;= 0) {
return false;
};
Gridster.generated_stylesheets.push(serialized_opts);
&#x2F;* generate CSS styles for cols *&#x2F;
for (i = cols + extra_cells; i &gt;= 0; i--) {
styles += &#x27;[data-col=&quot;&#x27;+ (i + 1) +&#x27;&quot;] { left: &#x27; +
(i * this.min_widget_width) +
for (i = opts.cols + extra_cells; i &gt;= 0; i--) {
styles += opts.namespace + &#x27; [data-col=&quot;&#x27;+ (i + 1) +&#x27;&quot;] { left: &#x27; +
((i * opts.widget_base_dimensions[0]) + (i *opts.widget_margins[0] ) + ((i+1) * opts.widget_margins[0])) +
&#x27;px;} &#x27;;
}
&#x2F;* generate CSS styles for rows *&#x2F;
for (i = rows + extra_cells; i &gt;= 0; i--) {
styles += &#x27;[data-row=&quot;&#x27; + (i + 1) + &#x27;&quot;] { top: &#x27; +
(i * this.min_widget_height) + &#x27;px;} &#x27;;
for (i = opts.rows + extra_cells; i &gt;= 0; i--) {
styles += opts.namespace + &#x27; [data-row=&quot;&#x27; + (i + 1) + &#x27;&quot;] { top: &#x27; +
((i * opts.widget_base_dimensions[1]) + (i * opts.widget_margins[1]) + ((i+1) * opts.widget_margins[1]) ) +
&#x27;px;} &#x27;;
}
for (var y = 1; y &lt; max_size_y; y++) {
styles += &#x27;[data-sizey=&quot;&#x27; + (y) + &#x27;&quot;] { height: &#x27; +
(y * this.options.widget_base_dimensions[1] + (y-1)*(this.options.widget_margins[1]*2)) + &#x27;px;}&#x27;;
styles += opts.namespace + &#x27; [data-sizey=&quot;&#x27; + (y) + &#x27;&quot;] { height: &#x27; +
(y * opts.widget_base_dimensions[1] + (y-1)*(opts.widget_margins[1]*2)) + &#x27;px;}&#x27;;
}
for (var x = 1; x &lt; max_size_x; x++) {
styles += &#x27;[data-sizex=&quot;&#x27; + (x) + &#x27;&quot;] { width: &#x27; +
(x * this.options.widget_base_dimensions[0] + (x-1)*(this.options.widget_margins[0]*2)) + &#x27;px;}&#x27;;
styles += opts.namespace + &#x27; [data-sizex=&quot;&#x27; + (x) + &#x27;&quot;] { width: &#x27; +
(x * opts.widget_base_dimensions[0] + (x-1)*(opts.widget_margins[0]*2)) + &#x27;px;}&#x27;;
}
return this.add_style_tag(styles);
@@ -2113,24 +2220,19 @@
var min_cols = Math.max.apply(null, actual_cols);
var min_rows = Math.max.apply(null, actual_rows);
cols = Math.max(min_cols, cols, this.options.min_cols);
rows = Math.max(min_rows, rows, this.options.min_rows);
this.cols = Math.max(min_cols, cols, this.options.min_cols);
this.rows = Math.max(min_rows, rows, this.options.min_rows);
&#x2F;&#x2F;this.support_grid_width = cols * this.min_widget_width;
&#x2F;&#x2F; this.support_grid_width = this.wrapper_width;
&#x2F;&#x2F; this.support_grid_height = rows * this.min_widget_height;
this.baseX = ($(window).width() - aw) &#x2F; 2;
this.baseY = this.$wrapper.offset().top;
&#x2F;&#x2F;this.baseX = 0;
if (this.options.autogenerate_stylesheet) {
this.generate_stylesheet(rows, cols);
this.generate_stylesheet();
}
&#x2F;* more faux rows that needed are created so that there are cells
* where drag beyond the limits *&#x2F;
return this.generate_faux_grid(rows, cols);
return this.generate_faux_grid(this.rows, this.cols);
};

View File

@@ -46,6 +46,8 @@
<li><a href=".&#x2F;classes/Coords.html">Coords</a></li>
<li><a href=".&#x2F;classes/Draggable.html">Draggable</a></li>
<li><a href=".&#x2F;classes/Gridster.html">Gridster</a></li>
</ul>

View File

@@ -13,7 +13,7 @@ module.exports = function(grunt) {
},
concat: {
dist_js: {
src: ['<banner:meta.banner>', '<file_strip_banner:src/jquery.coords.js>', '<file_strip_banner:src/jquery.collision.js>', '<file_strip_banner:src/<%= pkg.name %>.js>'],
src: ['<banner:meta.banner>', '<file_strip_banner:src/jquery.coords.js>', '<file_strip_banner:src/jquery.collision.js>', 'src/utils.js', '<file_strip_banner:src/jquery.draggable.js>', '<file_strip_banner:src/<%= pkg.name %>.js>'],
dest: 'dist/<%= pkg.name %>.js'
},
dist_css: {

View File

@@ -56,7 +56,7 @@
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1"></li>
<li data-row="1" data-col="1" data-sizex="2" data-sizey="1"></li>
<li data-row="2" data-col="1" data-sizex="1" data-sizey="1"></li>
<li data-row="3" data-col="1" data-sizex="1" data-sizey="1"></li>
@@ -85,10 +85,10 @@
<article class="m_txt">
<h3 class="heading-l">Setup</h3>
<p>Nowadays griddable.js depends on jQuery and jQuery UI draggable, so you need to include this scripts in the head of your document.</p>
<p>Nowadays griddable.js depends on jQuery, so you need to include it in the head of your document.</p>
<h4 class="heading-m">Include dependencies</h4>
<p>Download the latest release at <a href="http://jquery.com/">jQuery</a> and <a href="http://jqueryui.com/">jQuery UI</a>.</p>
<p>Download the latest release at <a href="http://jquery.com/">jQuery</a>.</p>
<script src="https://gist.github.com/3129541.js?file=gridder.html"></script>
@@ -144,10 +144,15 @@
<li><a href="#extra_cols_opt">extra_cols</a></li>
<li><a href="#extra_rows_opt">extra_rows</a></li>
<li><a href="#autogenerate_stylesheet_opt">autogenerate_stylesheet</a></li>
<li><a href="#avoid_overlapped_widgets_opt">avoid_overlapped_widgets</a></li>
<li><a href="#on_overlap_start_opt">on_overlap_start</a></li>
<li><a href="#on_overlap_opt">on_overlap</a></li>
<li><a href="#on_overlap_stop_opt">on_overlap_stop</a></li>
<li><a href="#draggable_start_opt">draggable.start</a></li>
<li><a href="#draggable_start_opt">draggable.drag</a></li>
<li><a href="#draggable_start_opt">draggable.stop</a></li>
<li><a href="#on_overlap_start_opt">collision.on_overlap_start</a></li>
<li><a href="#on_overlap_opt">collision.on_overlap</a></li>
<li><a href="#on_overlap_stop_opt">collision.on_overlap_stop</a></li>
</ul>
</nav><br><br>
@@ -196,11 +201,20 @@
<h4 id="autogenerate_stylesheet_opt" class="heading-m">autogenerate_stylesheet: <em>true</em></h4>
<p>If true, all the CSS required to position all widgets in their respective columns and rows will be generated automatically and injected to the <code>&lt;head&gt;</code> of the document. You can set this to false, and write your own CSS targeting rows and cols via data-attributes like so: <code>[data-col="1"] { left: 10px; }</code></p>
<h4 id="avoid_overlapped_widgets_opt" class="heading-m">avoid_overlapped_widgets: <em>true</em></h4>
<p>Avoid that widgets loaded from the DOM can be overlapped. It is helpful if the positions were bad stored in the database or if there was any conflict.</p>
<h4 id="serialize_params_opt" class="heading-m">serialize_params: <em>function($w, wgd) { return { col: wgd.col, row: wgd.row } }</em></h4>
<p>Return the data you want for each widget in the serialize method. Two arguments are passed: `$w`: the jQuery wrapped HTMLElement, and `wgd`: the grid coords object (`col`, `row`, `size_x`, `size_y`).</p>
<h4 id="draggable_opt" class="heading-m">draggable: <em>{}</em></h4>
<p>The configuration object of the jQuery UI Draggable Plugin. See <a href="http://jqueryui.com/demos/draggable/">http://jqueryui.com/demos/draggable/</a> for more information.</p>
<h4 id="draggable_start_opt" class="heading-m">draggable.start: <em>function(event, ui){}</em></h4>
<p>Executes a function when dragging starts.</p>
<h4 id="draggable_drag_opt" class="heading-m">draggable.drag: <em>function(event, ui){}</em></h4>
<p>Executes a function when the mouse is moved during the dragging.</p>
<h4 id="draggable_stop_opt" class="heading-m">draggable.stop: <em>function(event, ui){}</em></h4>
<p>Executes a function when dragging stops.</p>
<h4 id="on_overlap_start_opt" class="heading-m">collision.on_overlap_start: <em>function(collider_data) { }</em></h4>
<p>Executes a function first time a widget overlaps with a "faux" grid cell.</p>
@@ -292,7 +306,7 @@
</header>
<article class="m_txt">
<p>Reminds that gridster.js depends on jQuery and jQuery UI draggable. Download the latest release at <a href="http://jquery.com/">jQuery</a> and <a href="http://jqueryui.com/">jQuery UI</a>.
<p>Reminds that gridster.js depends on jQuery. Download the latest release at <a href="http://jquery.com/">jQuery</a>.
</p>
<h3 class="heading-l">gridster.<u>js</u></h3>
@@ -354,7 +368,6 @@
</footer>
<script type="text/javascript" src="libs/jquery/jquery.js"></script>
<script type="text/javascript" src="libs/jquery-ui/jquery-ui.js"></script>
<script src="dist/jquery.gridster.js" type="text/javascript" charset="utf-8"></script>
@@ -367,10 +380,7 @@
widget_margins: [10, 10],
widget_base_dimensions: [140, 140],
min_cols: 6,
min_rows: 10,
draggable: {
helper: "clone"
}
min_rows: 10
}).data('gridster');
});