需要用到js,gridster
html代码如下
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/demo.css">
<link rel="stylesheet" href="css/jquery.gridster.min.css">
</head>
<body>
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/gridster.js"></script>
<script type="text/javascript">
var gridster;
// same object than generated with gridster.serialize() method
var gridsterJson = [
{'col':1,"row":1,"size_x":2,"size_y":1,"id":"GangOfficers"},
{"col":3,"row":1,"size_x":2,"size_y":1,"id":"RunStatus"},
{"col":5,"row":1,"size_x":2,"size_y":1,"id":"TodayWeather"},
{"col":7,"row":1,"size_x":4,"size_y":3,"id":"TasksFull"},
{"col":1,"row":2,"size_x":6,"size_y":2,"id":"ReservoirWaterLevel"},
{"col":1,"row":4,"size_x":6,"size_y":2,"id":"ElectricityGeneration"},
{"col":7,"row":4,"size_x":4,"size_y":2,"id":"InspectionTasks"}
];
if("${gridsterUser.id}"!=""){
var gridsterJson = ${gridsterUser.json};
}
var serialization = gridsterJson;
serialization = Gridster.sort_by_row_and_col_asc(serialization);
$(document).ready(function () {
gridster = $(".gridster ul").gridster({
widget_margins: [10, 10],
max_cols:10,
widget_base_dimensions: [140, 140],
shift_larger_widgets_down: false,
resize: {
enabled: true,
stop: function(e, ui, $widget) {
saveDynamicConfiguraionModule();
}
},
draggable: {
stop:function(event, ui){
saveDynamicConfiguraionModule();
}
}
}).data('gridster');
gridster.remove_all_widgets();
$.each(serialization, function () {
gridster.add_widget('<li ><p>'+this.id+'</p></li>', this.size_x, this.size_y, this.col, this.row,"","","",this.id);
});
$('.gridster li').dblclick(function(){
gridster.remove_widget( this, function(){
saveDynamicConfiguraionModule();
})
});
$('.gridster-list li').dblclick(function(){
var id = $(this).attr("data-id");
gridster.add_widget('<li ><p>'+id+'</p></li>', this.size_x, this.size_y, this.col, this.row,"","","",id);
saveDynamicConfiguraionModule();
$('.gridster li').dblclick(function(){
gridster.remove_widget( this, function(e){
})
});
});
});
function saveDynamicConfiguraionModule(){
var s = gridster.serialize();
s = JSON.stringify(s);
s = s.replace(/"+/g,"'");
$.ajax({
url: "<c:url value='/management/org/DynamicConfiguraionModule/save'/>",
type: 'post',
dataType: 'JSON',
data:{
id:"${gridsterUser.id}",
json:s,
userId:"${userId}"
},
success: function(data){
if(data.status!="success"){
alert("保存失败!");
}
},
error: function(){
}
});
}
</script>
</head>
<body>
<div class="gridster" >
<ul >
</ul>
</div>
<div class="gridster-list" >
<ul >
<li data-size_x="1" data-size_y="1" data-col="1" data-row="1" data-id="GangOfficers"><p>到岗人员</p></li>
<li data-size_x="1" data-size_y="1" data-col="1" data-row="1" data-id="RunStatus"><p>运行状态</p></li>
<li data-size_x="1" data-size_y="1" data-col="1" data-row="1" data-id="TodayWeather"><p>今日天气</p></li>
<li data-size_x="1" data-size_y="1" data-col="1" data-row="1" data-id="TasksFull"><p>个人任务</p></li>
<li data-size_x="1" data-size_y="1" data-col="1" data-row="1" data-id="ReservoirWaterLevel"><p>库容水位</p></li>
<li data-size_x="1" data-size_y="1" data-col="1" data-row="1" data-id="ElectricityGeneration"><p>电站发电量</p></li>
<li data-size_x="1" data-size_y="1" data-col="1" data-row="1" data-id="InspectionTasks"><p>巡查任务</p></li>
</ul>
</div>
</body>
</html>
修改源码后的js如下
/*! gridster.js - v0.7.0 - 2016-02-26 - * https://dsmorse.github.io/gridster.js/ - Copyright (c) 2016 ducksboard; Licensed MIT */!function(a, b) {
"use strict";
"object" == typeof exports ? module.exports = b(require("jquery")) : "function" == typeof define && define.amd ? define("gridster-coords", ["jquery"], b) : a.GridsterCoords = b(a.$ || a.jQuery)
}(this, function(a) {
"use strict";
function b(b) {
return b[0] && a.isPlainObject(b[0]) ? this.data = b[0] : this.el = b,
this.isCoords = !0,
this.coords = {},
this.init(),
this
}
var c = b.prototype;
return c.init = function() {
this.set(),
this.original_coords = this.get()
}
,
c.set = function(a, b) {
var c = this.el;
if (c && !a && (this.data = c.offset(),
this.data.width = c[0].scrollWidth,
this.data.height = c[0].scrollHeight),
c && a && !b) {
var d = c.offset();
this.data.top = d.top,
this.data.left = d.left
}
var e = this.data;
return void 0 === e.left && (e.left = e.x1),
void 0 === e.top && (e.top = e.y1),
this.coords.x1 = e.left,
this.coords.y1 = e.top,
this.coords.x2 = e.left + e.width,
this.coords.y2 = e.top + e.height,
this.coords.cx = e.left + e.width / 2,
this.coords.cy = e.top + e.height / 2,
this.coords.width = e.width,
this.coords.height = e.height,
this.coords.el = c || !1,
this
}
,
c.update = function(b) {
if (!b && !this.el)
return this;
if (b) {
var c = a.extend({}, this.data, b);
return this.data = c,
this.set(!0, !0)
}
return this.set(!0),
this
}
,
c.get = function() {
return this.coords
}
,
c.destroy = function() {
this.el.removeData("coords"),
delete this.el
}
,
a.fn.coords = function() {
if (this.data("coords"))
return this.data("coords");
var a = new b(this);
return this.data("coords", a),
a
}
,
b
}),
function(a, b) {
"use strict";
"object" == typeof exports ? module.exports = b(require("jquery")) : "function" == typeof define && define.amd ? define("gridster-collision", ["jquery", "gridster-coords"], b) : a.GridsterCollision = b(a.$ || a.jQuery, a.GridsterCoords)
}(this, function(a, b) {
"use strict";
function c(b, c, e) {
this.options = a.extend(d, e),
this.$element = b,
this.last_colliders = [],
this.last_colliders_coords = [],
this.set_colliders(c),
this.init()
}
var d = {
colliders_context: document.body,
overlapping_region: "C"
};
c.defaults = d;
var e = c.prototype;
return e.init = function() {
this.find_collisions()
}
,
e.overlaps = function(a, b) {
var c = !1
, d = !1;
return (b.x1 >= a.x1 && b.x1 <= a.x2 || b.x2 >= a.x1 && b.x2 <= a.x2 || a.x1 >= b.x1 && a.x2 <= b.x2) && (c = !0),
(b.y1 >= a.y1 && b.y1 <= a.y2 || b.y2 >= a.y1 && b.y2 <= a.y2 || a.y1 >= b.y1 && a.y2 <= b.y2) && (d = !0),
c && d
}
,
e.detect_overlapping_region = function(a, b) {
var c = ""
, d = "";
return a.y1 > b.cy && a.y1 < b.y2 && (c = "N"),
a.y2 > b.y1 && a.y2 < b.cy && (c = "S"),
a.x1 > b.cx && a.x1 < b.x2 && (d = "W"),
a.x2 > b.x1 && a.x2 < b.cx && (d = "E"),
c + d || "C"
}
,
e.calculate_overlapped_area_coords = function(b, c) {
var d = Math.max(b.x1, c.x1)
, e = Math.max(b.y1, c.y1)
, f = Math.min(b.x2, c.x2)
, g = Math.min(b.y2, c.y2);
return a({
left: d,
top: e,
width: f - d,
height: g - e
}).coords().get()
}
,
e.calculate_overlapped_area = function(a) {
return a.width * a.height
}
,
e.manage_colliders_start_stop = function(b, c, d) {
for (var e = this.last_colliders_coords, f = 0, g = e.length; g > f; f++)
-1 === a.inArray(e[f], b) && c.call(this, e[f]);
for (var h = 0, i = b.length; i > h; h++)
-1 === a.inArray(b[h], e) && d.call(this, b[h])
}
,
e.find_collisions = function(b) {
for (var c = this, d = this.options.overlapping_region, e = [], f = [], g = this.colliders || this.$colliders, h = g.length, i = c.$element.coords().update(b || !1).get(); h--; ) {
var j = c.$colliders ? a(g[h]) : g[h]
, k = j.isCoords ? j : j.coords()
, l = k.get()
, m = c.overlaps(i, l);
if (m) {
var n = c.detect_overlapping_region(i, l);
if (n === d || "all" === d) {
var o = c.calculate_overlapped_area_coords(i, l)
, p = c.calculate_overlapped_area(o);
if (0 !== p) {
var q = {
area: p,
area_coords: o,
region: n,
coords: l,
player_coords: i,
el: j
};
c.options.on_overlap && c.options.on_overlap.call(this, q),
e.push(k),
f.push(q)
}
}
}
}
return (c.options.on_overlap_stop || c.options.on_overlap_start) && this.manage_colliders_start_stop(e, c.options.on_overlap_start, c.options.on_overlap_stop),
this.last_colliders_coords = e,
f
}
,
e.get_closest_colliders = function(a) {
var b = this.find_collisions(a);
return b.sort(function(a, b) {
return "C" === a.region && "C" === b.region ? a.coords.y1 < b.coords.y1 || a.coords.x1 < b.coords.x1 ? -1 : 1 : (a.area < b.area,
1)
}),
b
}
,
e.set_colliders = function(b) {
"string" == typeof b || b instanceof a ? this.$colliders = a(b, this.options.colliders_context).not(this.$element) : this.colliders = a(b)
}
,
a.fn.collision = function(a, b) {
return new c(this,a,b)
}
,
c
}),
function(a, b) {
"use strict";
a.delay = function(a, b) {
var c = Array.prototype.slice.call(arguments, 2);
return setTimeout(function() {
return a.apply(null , c)
}, b)
}
,
a.debounce = function(a, b, c) {
var d;
return function() {
var e = this
, f = arguments
, g = function() {
d = null ,
c || a.apply(e, f)
}
;
c && !d && a.apply(e, f),
clearTimeout(d),
d = setTimeout(g, b)
}
}
,
a.throttle = function(a, b) {
var c, d, e, f, g, h, i = debounce(function() {
g = f = !1
}, b);
return function() {
c = this,
d = arguments;
var j = function() {
e = null ,
g && a.apply(c, d),
i()
}
;
return e || (e = setTimeout(j, b)),
f ? g = !0 : h = a.apply(c, d),
i(),
f = !0,
h
}
}
}(window),
function(a, b) {
"use strict";
"object" == typeof exports ? module.exports = b(require("jquery")) : "function" == typeof define && define.amd ? define("gridster-draggable", ["jquery"], b) : a.GridsterDraggable = b(a.$ || a.jQuery)
}(this, function(a) {
"use strict";
function b(b, d) {
this.options = a.extend({}, c, d),
this.$document = a(document),
this.$container = a(b),
this.$scroll_container = this.options.scroll_container === window ? a(window) : this.$container.closest(this.options.scroll_container),
this.is_dragging = !1,
this.player_min_left = 0 + this.options.offset_left,
this.id = i(),
this.ns = ".gridster-draggable-" + this.id,
this.init()
}
var c = {
items: "li",
distance: 1,
limit: !0,
offset_left: 0,
autoscroll: !0,
ignore_dragging: ["INPUT", "TEXTAREA", "SELECT", "BUTTON"],
handle: null ,
container_width: 0,
move_element: !0,
helper: !1,
remove_helper: !0
}
, d = a(window)
, e = {
x: "left",
y: "top"
}
, f = !!("ontouchstart" in window)
, g = function(a) {
return a.charAt(0).toUpperCase() + a.slice(1)
}
, h = 0
, i = function() {
return ++h + ""
}
;
b.defaults = c;
var j = b.prototype;
return j.init = function() {
var b = this.$container.css("position");
this.calculate_dimensions(),
this.$container.css("position", "static" === b ? "relative" : b),
this.disabled = !1,
this.events(),
d.bind(this.nsEvent("resize"), throttle(a.proxy(this.calculate_dimensions, this), 200))
}
,
j.nsEvent = function(a) {
return (a || "") + this.ns
}
,
j.events = function() {
this.pointer_events = {
start: this.nsEvent("touchstart") + " " + this.nsEvent("mousedown"),
move: this.nsEvent("touchmove") + " " + this.nsEvent("mousemove"),
end: this.nsEvent("touchend") + " " + this.nsEvent("mouseup")
},
this.$container.on(this.nsEvent("selectstart"), a.proxy(this.on_select_start, this)),
this.$container.on(this.pointer_events.start, this.options.items, a.proxy(this.drag_handler, this)),
this.$document.on(this.pointer_events.end, a.proxy(function(a) {
this.is_dragging = !1,
this.disabled || (this.$document.off(this.pointer_events.move),
this.drag_start && this.on_dragstop(a))
}, this))
}
,
j.get_actual_pos = function(a) {
return a.position()
}
,
j.get_mouse_pos = function(a) {
if (a.originalEvent && a.originalEvent.touches) {
var b = a.originalEvent;
a = b.touches.length ? b.touches[0] : b.changedTouches[0]
}
return {
left: a.clientX,
top: a.clientY
}
}
,
j.get_offset = function(a) {
a.preventDefault();
var b = this.get_mouse_pos(a)
, c = Math.round(b.left - this.mouse_init_pos.left)
, d = Math.round(b.top - this.mouse_init_pos.top)
, e = Math.round(this.el_init_offset.left + c - this.baseX + this.$scroll_container.scrollLeft() - this.scroll_container_offset_x)
, f = Math.round(this.el_init_offset.top + d - this.baseY + this.$scroll_container.scrollTop() - this.scroll_container_offset_y);
return this.options.limit && (e > this.player_max_left ? e = this.player_max_left : e < this.player_min_left && (e = this.player_min_left)),
{
position: {
left: e,
top: f
},
pointer: {
left: b.left,
top: b.top,
diff_left: c + (this.$scroll_container.scrollLeft() - this.scroll_container_offset_x),
diff_top: d + (this.$scroll_container.scrollTop() - this.scroll_container_offset_y)
}
}
}
,
j.get_drag_data = function(a) {
var b = this.get_offset(a);
return b.$player = this.$player,
b.$helper = this.helper ? this.$helper : this.$player,
b
}
,
j.set_limits = function(a) {
return a || (a = this.$container.width()),
this.player_max_left = a - this.player_width + -this.options.offset_left,
this.options.container_width = a,
this
}
,
j.scroll_in = function(a, b) {
var c, d = e[a], f = 50, h = 30, i = "scroll" + g(d), j = "x" === a, k = j ? this.scroller_width : this.scroller_height;
c = this.$scroll_container === window ? j ? this.$scroll_container.width() : this.$scroll_container.height() : j ? this.$scroll_container[0].scrollWidth : this.$scroll_container[0].scrollHeight;
var l, m = j ? this.$player.width() : this.$player.height(), n = this.$scroll_container[i](), o = n, p = o + k, q = p - f, r = o + f, s = o + b.pointer[d], t = c - k + m;
return s >= q && (l = n + h,
t > l && (this.$scroll_container[i](l),
this["scroll_offset_" + a] += h)),
r >= s && (l = n - h,
l > 0 && (this.$scroll_container[i](l),
this["scroll_offset_" + a] -= h)),
this
}
,
j.manage_scroll = function(a) {
this.scroll_in("x", a),
this.scroll_in("y", a)
}
,
j.calculate_dimensions = function() {
this.scroller_height = this.$scroll_container.height(),
this.scroller_width = this.$scroll_container.width()
}
,
j.drag_handler = function(b) {
if (!this.disabled && (1 === b.which || f) && !this.ignore_drag(b)) {
var c = this
, d = !0;
return this.$player = a(b.currentTarget),
this.el_init_pos = this.get_actual_pos(this.$player),
this.mouse_init_pos = this.get_mouse_pos(b),
this.offsetY = this.mouse_init_pos.top - this.el_init_pos.top,
this.$document.on(this.pointer_events.move, function(a) {
var b = c.get_mouse_pos(a)
, e = Math.abs(b.left - c.mouse_init_pos.left)
, f = Math.abs(b.top - c.mouse_init_pos.top);
return e > c.options.distance || f > c.options.distance ? d ? (d = !1,
c.on_dragstart.call(c, a),
!1) : (c.is_dragging === !0 && c.on_dragmove.call(c, a),
!1) : !1
}),
f ? void 0 : !1
}
}
,
j.on_dragstart = function(a) {
if (a.preventDefault(),
this.is_dragging)
return this;
this.drag_start = this.is_dragging = !0;
var b = this.$container.offset();
return this.baseX = Math.round(b.left),
this.baseY = Math.round(b.top),
"clone" === this.options.helper ? (this.$helper = this.$player.clone().appendTo(this.$container).addClass("helper"),
this.helper = !0) : this.helper = !1,
this.scroll_container_offset_y = this.$scroll_container.scrollTop(),
this.scroll_container_offset_x = this.$scroll_container.scrollLeft(),
this.el_init_offset = this.$player.offset(),
this.player_width = this.$player.width(),
this.set_limits(this.options.container_width),
this.options.start && this.options.start.call(this.$player, a, this.get_drag_data(a)),
!1
}
,
j.on_dragmove = function(a) {
var b = this.get_drag_data(a);
this.options.autoscroll && this.manage_scroll(b),
this.options.move_element && (this.helper ? this.$helper : this.$player).css({
position: "absolute",
left: b.position.left,
top: b.position.top
});
var c = this.last_position || b.position;
return b.prev_position = c,
this.options.drag && this.options.drag.call(this.$player, a, b),
this.last_position = b.position,
!1
}
,
j.on_dragstop = function(a) {
var b = this.get_drag_data(a);
return this.drag_start = !1,
this.options.stop && this.options.stop.call(this.$player, a, b),
this.helper && this.options.remove_helper && this.$helper.remove(),
!1
}
,
j.on_select_start = function(a) {
return this.disabled || this.ignore_drag(a) ? void 0 : !1
}
,
j.enable = function() {
this.disabled = !1
}
,
j.disable = function() {
this.disabled = !0
}
,
j.destroy = function() {
this.disable(),
this.$container.off(this.ns),
this.$document.off(this.ns),
d.off(this.ns),
a.removeData(this.$container, "drag")
}
,
j.ignore_drag = function(b) {
return this.options.handle ? !a(b.target).is(this.options.handle) : a.isFunction(this.options.ignore_dragging) ? this.options.ignore_dragging(b) : this.options.resize ? !a(b.target).is(this.options.items) : a(b.target).is(this.options.ignore_dragging.join(", "))
}
,
a.fn.gridDraggable = function(a) {
return new b(this,a)
}
,
a.fn.dragg = function(c) {
return this.each(function() {
a.data(this, "drag") || a.data(this, "drag", new b(this,c))
})
}
,
b
}),
function(a, b) {
"use strict";
"object" == typeof exports ? module.exports = b(require("jquery"), require("./jquery.draggable.js"), require("./jquery.collision.js"), require("./jquery.coords.js"), require("./utils.js")) : "function" == typeof define && define.amd ? define(["jquery", "gridster-draggable", "gridster-collision"], b) : a.Gridster = b(a.$ || a.jQuery, a.GridsterDraggable, a.GridsterCollision)
}(this, function(a, b, c) {
"use strict";
function d(b, c) {
this.options = a.extend(!0, {}, g, c),
this.options.draggable = this.options.draggable || {},
this.options.draggable = a.extend(!0, {}, this.options.draggable, {
scroll_container: this.options.scroll_container
}),
this.$el = a(b),
this.$scroll_container = this.options.scroll_container === window ? a(window) : this.$el.closest(this.options.scroll_container),
this.$wrapper = this.$el.parent(),
this.$widgets = this.$el.children(this.options.widget_selector).addClass("gs-w"),
this.$changed = a([]),
this.w_queue = {},
this.is_responsive() ? this.min_widget_width = this.get_responsive_col_width() : this.min_widget_width = this.options.widget_base_dimensions[0],
this.min_widget_height = this.options.widget_base_dimensions[1],
this.is_resizing = !1,
this.min_col_count = this.options.min_cols,
this.prev_col_count = this.min_col_count,
this.generated_stylesheets = [],
this.$style_tags = a([]),
this.options.auto_init && this.init()
}
function e(a) {
for (var b = ["col", "row", "size_x", "size_y"], c = {}, d = 0, e = b.length; e > d; d++) {
var f = b[d];
if (!(f in a))
throw new Error("Not exists property `" + f + "`");
var g = a[f];
if (!g || isNaN(g))
throw new Error("Invalid value of `" + f + "` property");
c[f] = +g
}
return c
}
var f = a(window)
, g = {
namespace: "",
widget_selector: "li",
static_class: "static",
widget_margins: [10, 10],
widget_base_dimensions: [400, 225],
extra_rows: 0,
extra_cols: 0,
min_cols: 1,
max_cols: 1 / 0,
min_rows: 1,
max_rows: 15,
autogenerate_stylesheet: !0,
avoid_overlapped_widgets: !0,
auto_init: !0,
center_widgets: !1,
responsive_breakpoint: !1,
scroll_container: window,
shift_larger_widgets_down: !0,
move_widgets_down_only: !1,
shift_widgets_up: !0,
show_element: function(a, b) {
b ? a.fadeIn(b) : a.fadeIn()
},
hide_element: function(a, b) {
b ? a.fadeOut(b) : a.fadeOut()
},
serialize_params: function(a, b) {
return {
col: b.col,
row: b.row,
size_x: b.size_x,
size_y: b.size_y,
id: b.id
}
},
collision: {
wait_for_mouseup: !1
},
draggable: {
items: ".gs-w:not(.static)",
distance: 4,
ignore_dragging: b.defaults.ignore_dragging.slice(0)
},
resize: {
enabled: !1,
axes: ["both"],
handle_append_to: "",
handle_class: "gs-resize-handle",
max_size: [1 / 0, 1 / 0],
min_size: [1, 1]
}
};
d.defaults = g,
d.generated_stylesheets = [],
d.sort_by_row_asc = function(b) {
return b = b.sort(function(b, c) {
return b.row || (b = a(b).coords().grid,
c = a(c).coords().grid),
b = e(b),
c = e(c),
b.row > c.row ? 1 : -1
})
}
,
d.sort_by_row_and_col_asc = function(a) {
return a = a.sort(function(a, b) {
return a = e(a),
b = e(b),
a.row > b.row || a.row === b.row && a.col > b.col ? 1 : -1
})
}
,
d.sort_by_col_asc = function(a) {
return a = a.sort(function(a, b) {
return a = e(a),
b = e(b),
a.col > b.col ? 1 : -1
})
}
,
d.sort_by_row_desc = function(a) {
return a = a.sort(function(a, b) {
return a = e(a),
b = e(b),
a.row + a.size_y < b.row + b.size_y ? 1 : -1
})
}
;
var h = d.prototype;
return h.init = function() {
this.options.resize.enabled && this.setup_resize(),
this.generate_grid_and_stylesheet(),
this.get_widgets_from_DOM(),
this.set_dom_grid_height(),
this.set_dom_grid_width(),
this.$wrapper.addClass("ready"),
this.draggable(),
this.options.resize.enabled && this.resizable(),
this.options.center_widgets && setTimeout(a.proxy(function() {
this.center_widgets()
}, this), 0),
f.bind("resize.gridster", throttle(a.proxy(this.recalculate_faux_grid, this), 200))
}
,
h.disable = function() {
return this.$wrapper.find(".player-revert").removeClass("player-revert"),
this.drag_api.disable(),
this
}
,
h.enable = function() {
return this.drag_api.enable(),
this
}
,
h.disable_resize = function() {
return this.$el.addClass("gs-resize-disabled"),
this.resize_api.disable(),
this
}
,
h.enable_resize = function() {
return this.$el.removeClass("gs-resize-disabled"),
this.resize_api.enable(),
this
}
,
h.add_widget = function(b, c, d, e, f, g, h, i, m) {
var j;
c || (c = 1),
d || (d = 1),
e || f ? (j = {
col: e,
row: f,
size_x: c,
size_y: d
},
this.options.avoid_overlapped_widgets && this.empty_cells(e, f, c, d)) : j = this.next_position(c, d);
var k = a(b).attr({
"data-col": j.col,
"data-row": j.row,
"data-sizex": c,
"data-sizey": d,
"data-id":m
}).addClass("gs-w").appendTo(this.$el).hide();
this.$widgets = this.$widgets.add(k),
this.$changed = this.$changed.add(k),
this.register_widget(k);
var l = parseInt(j.row) + (parseInt(j.size_y) - 1);
return this.rows < l && this.add_faux_rows(l - this.rows),
g && this.set_widget_max_size(k, g),
h && this.set_widget_min_size(k, h),
this.set_dom_grid_width(),
this.set_dom_grid_height(),
this.drag_api.set_limits(this.cols * this.min_widget_width + (this.cols + 1) * this.options.widget_margins[0]),
this.options.center_widgets && setTimeout(a.proxy(function() {
this.center_widgets()
}, this), 0),
this.options.show_element.call(this, k, i),
k
}
,
h.set_widget_min_size = function(a, b) {
if (a = "number" == typeof a ? this.$widgets.eq(a) : a,
!a.length)
return this;
var c = a.data("coords").grid;
return c.min_size_x = b[0],
c.min_size_y = b[1],
this
}
,
h.set_widget_max_size = function(a, b) {
if (a = "number" == typeof a ? this.$widgets.eq(a) : a,
!a.length)
return this;
var c = a.data("coords").grid;
return c.max_size_x = b[0],
c.max_size_y = b[1],
this
}
,
h.add_resize_handle = function(b) {
var c = this.options.resize.handle_append_to ? a(this.options.resize.handle_append_to, b) : b;
return 0 === c.children("span[class~='" + this.resize_handle_class + "']").length && a(this.resize_handle_tpl).appendTo(c),
this
}
,
h.resize_widget = function(a, b, c, d) {
var e = a.coords().grid;
this.is_resizing = !0,
b || (b = e.size_x),
c || (c = e.size_y),
this.is_valid_row(e.row, c) || this.add_faux_rows(Math.max(this.calculate_highest_row(e.row, c) - this.rows, 0)),
this.is_valid_col(e.col, c) || this.add_faux_cols(Math.max(this.calculate_highest_row(e.col, b) - this.cols, 0));
var f = {
col: e.col,
row: e.row,
size_x: b,
size_y: c
};
return this.mutate_widget_in_gridmap(a, e, f),
this.set_dom_grid_height(),
this.set_dom_grid_width(),
d && d.call(this, f.size_x, f.size_y),
this.is_resizing = !1,
a
}
,
h.expand_widget = function(b, c, d, e, f) {
var g = b.coords().grid
, h = Math.floor((a(window).width() - 2 * this.options.widget_margins[0]) / this.min_widget_width);
c = c || Math.min(h, this.cols),
d || (d = g.size_y);
var i = g.size_y;
b.attr("pre_expand_col", g.col),
b.attr("pre_expand_sizex", g.size_x),
b.attr("pre_expand_sizey", g.size_y);
var j = e || 1;
d > i && this.add_faux_rows(Math.max(d - i, 0));
var k = {
col: j,
row: g.row,
size_x: c,
size_y: d
};
return this.mutate_widget_in_gridmap(b, g, k),
this.set_dom_grid_height(),
this.set_dom_grid_width(),
f && f.call(this, k.size_x, k.size_y),
b
}
,
h.collapse_widget = function(a, b) {
var c = a.coords().grid
, d = parseInt(a.attr("pre_expand_sizex"))
, e = parseInt(a.attr("pre_expand_sizey"))
, f = parseInt(a.attr("pre_expand_col"))
, g = {
col: f,
row: c.row,
size_x: d,
size_y: e
};
return this.mutate_widget_in_gridmap(a, c, g),
this.set_dom_grid_height(),
this.set_dom_grid_width(),
b && b.call(this, g.size_x, g.size_y),
a
}
,
h.fit_to_content = function(a, b, c, d) {
var e = a.coords().grid
, f = this.$wrapper.width()
, g = this.$wrapper.height()
, h = this.options.widget_base_dimensions[0] + 2 * this.options.widget_margins[0]
, i = this.options.widget_base_dimensions[1] + 2 * this.options.widget_margins[1]
, j = Math.ceil((f + 2 * this.options.widget_margins[0]) / h)
, k = Math.ceil((g + 2 * this.options.widget_margins[1]) / i)
, l = {
col: e.col,
row: e.row,
size_x: Math.min(b, j),
size_y: Math.min(c, k)
};
return this.mutate_widget_in_gridmap(a, e, l),
this.set_dom_grid_height(),
this.set_dom_grid_width(),
d && d.call(this, l.size_x, l.size_y),
a
}
,
h.center_widgets = debounce(function() {
var b, c = this.$wrapper.width();
b = this.is_responsive() ? this.get_responsive_col_width() : this.options.widget_base_dimensions[0] + 2 * this.options.widget_margins[0];
var d = 2 * Math.floor(Math.max(Math.floor(c / b), this.min_col_count) / 2);
this.options.min_cols = d,
this.options.max_cols = d,
this.options.extra_cols = 0,
this.set_dom_grid_width(d),
this.cols = d;
var e = (d - this.prev_col_count) / 2;
return 0 > e ? (this.get_min_col() > -1 * e ? this.shift_cols(e) : this.resize_widget_dimensions(this.options),
setTimeout(a.proxy(function() {
this.resize_widget_dimensions(this.options)
}, this), 0)) : e > 0 ? (this.resize_widget_dimensions(this.options),
setTimeout(a.proxy(function() {
this.shift_cols(e)
}, this), 0)) : (this.resize_widget_dimensions(this.options),
setTimeout(a.proxy(function() {
this.resize_widget_dimensions(this.options)
}, this), 0)),
this.prev_col_count = d,
this
}, 200),
h.get_min_col = function() {
return Math.min.apply(Math, this.$widgets.map(a.proxy(function(b, c) {
return this.get_cells_occupied(a(c).coords().grid).cols
}, this)).get())
}
,
h.shift_cols = function(b) {
var c = this.$widgets.map(a.proxy(function(b, c) {
var d = a(c);
return this.dom_to_coords(d)
}, this));
c = d.sort_by_row_and_col_asc(c),
c.each(a.proxy(function(c, d) {
var e = a(d.el)
, f = e.coords().grid
, g = parseInt(e.attr("data-col"))
, h = {
col: Math.max(Math.round(g + b), 1),
row: f.row,
size_x: f.size_x,
size_y: f.size_y
};
setTimeout(a.proxy(function() {
this.mutate_widget_in_gridmap(e, f, h)
}, this), 0)
}, this))
}
,
h.mutate_widget_in_gridmap = function(b, c, d) {
var e = c.size_y
, f = this.get_cells_occupied(c)
, g = this.get_cells_occupied(d)
, h = [];
a.each(f.cols, function(b, c) {
-1 === a.inArray(c, g.cols) && h.push(c)
});
var i = [];
a.each(g.cols, function(b, c) {
-1 === a.inArray(c, f.cols) && i.push(c)
});
var j = [];
a.each(f.rows, function(b, c) {
-1 === a.inArray(c, g.rows) && j.push(c)
});
var k = [];
if (a.each(g.rows, function(b, c) {
-1 === a.inArray(c, f.rows) && k.push(c)
}),
this.remove_from_gridmap(c),
i.length) {
var l = [d.col, d.row, d.size_x, Math.min(e, d.size_y), b];
this.empty_cells.apply(this, l)
}
if (k.length) {
var m = [d.col, d.row, d.size_x, d.size_y, b];
this.empty_cells.apply(this, m)
}
if (c.col = d.col,
c.row = d.row,
c.size_x = d.size_x,
c.size_y = d.size_y,
this.add_to_gridmap(d, b),
b.removeClass("player-revert"),
this.update_widget_dimensions(b, d),
h.length) {
var n = [h[0], d.row, h[h.length - 1] - h[0] + 1, Math.min(e, d.size_y), b];
this.remove_empty_cells.apply(this, n)
}
if (j.length) {
var o = [d.col, d.row, d.size_x, d.size_y, b];
this.remove_empty_cells.apply(this, o)
}
return this.move_widget_up(b),
this
}
,
h.empty_cells = function(b, c, d, e, f) {
var g = this.widgets_below({
col: b,
row: c - e,
size_x: d,
size_y: e
});
return g.not(f).each(a.proxy(function(b, d) {
var f = a(d)
, g = f.coords().grid;
if (g.row <= c + e - 1) {
var h = c + e - g.row;
this.move_widget_down(f, h)
}
}, this)),
this.is_resizing || this.set_dom_grid_height(),
this
}
,
h.remove_empty_cells = function(b, c, d, e, f) {
var g = this.widgets_below({
col: b,
row: c,
size_x: d,
size_y: e
});
return g.not(f).each(a.proxy(function(b, c) {
this.move_widget_up(a(c), e)
}, this)),
this.set_dom_grid_height(),
this
}
,
h.next_position = function(a, b) {
a || (a = 1),
b || (b = 1);
for (var c, e = this.gridmap, f = e.length, g = [], h = 1; f > h; h++) {
c = e[h].length;
for (var i = 1; c >= i; i++) {
var j = this.can_move_to({
size_x: a,
size_y: b
}, h, i);
j && g.push({
col: h,
row: i,
size_y: b,
size_x: a
})
}
}
return g.length ? d.sort_by_row_and_col_asc(g)[0] : !1
}
,
h.remove_by_grid = function(a, b) {
var c = this.is_widget(a, b);
c && this.remove_widget(c)
}
,
h.remove_widget = function(b, c, d) {
var e = b instanceof a ? b : a(b);
if (0 === e.length)
return this;
var f = e.coords().grid;
if (void 0 === f)
return this;
a.isFunction(c) && (d = c,
c = !1),
this.cells_occupied_by_placeholder = {},
this.$widgets = this.$widgets.not(e);
var g = this.widgets_below(e);
return this.remove_from_gridmap(f),
this.options.hide_element.call(this, e, a.proxy(function() {
e.remove(),
c || g.each(a.proxy(function(b, c) {
this.move_widget_up(a(c), f.size_y)
}, this)),
this.set_dom_grid_height(),
d && d.call(this, b)
}, this)),
this
}
,
h.remove_all_widgets = function(b) {
return this.$widgets.each(a.proxy(function(a, c) {
this.remove_widget(c, !0, b)
}, this)),
this
}
,
h.serialize = function(b) {
b || (b = this.$widgets);
var c = [];
return b.each(a.proxy(function(b, d) {
var e = a(d);
"undefined" != typeof e.coords().grid && c.push(this.options.serialize_params(e, e.coords().grid))
}, this)),
c
}
,
h.serialize_changed = function() {
return this.serialize(this.$changed)
}
,
h.dom_to_coords = function(a) {
return {
col: parseInt(a.attr("data-col"), 10),
row: parseInt(a.attr("data-row"), 10),
size_x: parseInt(a.attr("data-sizex"), 10) || 1,
size_y: parseInt(a.attr("data-sizey"), 10) || 1,
max_size_x: parseInt(a.attr("data-max-sizex"), 10) || !1,
max_size_y: parseInt(a.attr("data-max-sizey"), 10) || !1,
min_size_x: parseInt(a.attr("data-min-sizex"), 10) || !1,
min_size_y: parseInt(a.attr("data-min-sizey"), 10) || !1,
el: a,
id: a.attr("data-id")
}
}
,
h.register_widget = function(b) {
var c = b instanceof a
, d = c ? this.dom_to_coords(b) : b
, e = !1;
c || (b = d.el);
var f = this.can_go_widget_up(d);
return this.options.shift_widgets_up && f && (d.row = f,
b.attr("data-row", f),
this.$el.trigger("gridster:positionchanged", [d]),
e = !0),
this.options.avoid_overlapped_widgets && !this.can_move_to({
size_x: d.size_x,
size_y: d.size_y
}, d.col, d.row) && (a.extend(d, this.next_position(d.size_x, d.size_y)),
b.attr({
"data-col": d.col,
"data-row": d.row,
"data-sizex": d.size_x,
"data-sizey": d.size_y
}),
e = !0),
b.data("coords", b.coords()),
b.data("coords").grid = d,
this.add_to_gridmap(d, b),
this.update_widget_dimensions(b, d),
this.options.resize.enabled && this.add_resize_handle(b),
e
}
,
h.update_widget_position = function(a, b) {
return this.for_each_cell_occupied(a, function(a, c) {
return this.gridmap[a] ? void (this.gridmap[a][c] = b) : this
}),
this
}
,
h.update_widget_dimensions = function(a, b) {
var c = b.size_x * (this.is_responsive() ? this.get_responsive_col_width() : this.options.widget_base_dimensions[0]) + (b.size_x - 1) * this.options.widget_margins[0]
, d = b.size_y * this.options.widget_base_dimensions[1] + (b.size_y - 1) * this.options.widget_margins[1];
return a.data("coords").update({
width: c,
height: d
}),
a.attr({
"data-col": b.col,
"data-row": b.row,
"data-sizex": b.size_x,
"data-sizey": b.size_y
}),
this
}
,
h.update_widgets_dimensions = function() {
return a.each(this.$widgets, a.proxy(function(b, c) {
var d = a(c).coords().grid;
"object" == typeof d && this.update_widget_dimensions(a(c), d)
}, this)),
this
}
,
h.remove_from_gridmap = function(a) {
return this.update_widget_position(a, !1)
}
,
h.add_to_gridmap = function(a, b) {
this.update_widget_position(a, b || a.el)
}
,
h.draggable = function() {
var b = this
, c = a.extend(!0, {}, this.options.draggable, {
offset_left: this.options.widget_margins[0],
offset_top: this.options.widget_margins[1],
container_width: this.cols * this.min_widget_width + (this.cols + 1) * this.options.widget_margins[0],
limit: !0,
start: function(c, d) {
b.$widgets.filter(".player-revert").removeClass("player-revert"),
b.$player = a(this),
b.$helper = a(d.$helper),
b.helper = !b.$helper.is(b.$player),
b.on_start_drag.call(b, c, d),
b.$el.trigger("gridster:dragstart")
},
stop: function(a, c) {
b.on_stop_drag.call(b, a, c),
b.$el.trigger("gridster:dragstop")
},
drag: throttle(function(a, c) {
b.on_drag.call(b, a, c),
b.$el.trigger("gridster:drag")
}, 60)
});
this.drag_api = this.$el.dragg(c).data("drag")
}
,
h.resizable = function() {
return this.resize_api = this.$el.gridDraggable({
items: "." + this.options.resize.handle_class,
offset_left: this.options.widget_margins[0],
container_width: this.container_width,
move_element: !1,
resize: !0,
limit: this.options.max_cols !== 1 / 0,
scroll_container: this.options.scroll_container,
start: a.proxy(this.on_start_resize, this),
stop: a.proxy(function(b, c) {
delay(a.proxy(function() {
this.on_stop_resize(b, c)
}, this), 120)
}, this),
drag: throttle(a.proxy(this.on_resize, this), 60)
}),
this
}
,
h.setup_resize = function() {
this.resize_handle_class = this.options.resize.handle_class;
var b = this.options.resize.axes
, c = '<span class="' + this.resize_handle_class + " " + this.resize_handle_class + '-{type}" />';
return this.resize_handle_tpl = a.map(b, function(a) {
return c.replace("{type}", a)
}).join(""),
a.isArray(this.options.draggable.ignore_dragging) && this.options.draggable.ignore_dragging.push("." + this.resize_handle_class),
this
}
,
h.on_start_drag = function(b, c) {
this.$helper.add(this.$player).add(this.$wrapper).addClass("dragging"),
this.highest_col = this.get_highest_occupied_cell().col,
this.$player.addClass("player"),
this.player_grid_data = this.$player.coords().grid,
this.placeholder_grid_data = a.extend({}, this.player_grid_data),
this.set_dom_grid_height(this.$el.height() + this.player_grid_data.size_y * this.min_widget_height),
this.set_dom_grid_width(this.cols);
var d = this.player_grid_data.size_x
, e = this.cols - this.highest_col;
this.options.max_cols === 1 / 0 && d >= e && this.add_faux_cols(Math.min(d - e, 1));
var f = this.faux_grid
, g = this.$player.data("coords").coords;
this.cells_occupied_by_player = this.get_cells_occupied(this.player_grid_data),
this.cells_occupied_by_placeholder = this.get_cells_occupied(this.placeholder_grid_data),
this.last_cols = [],
this.last_rows = [],
this.collision_api = this.$helper.collision(f, this.options.collision),
this.$preview_holder = a("<" + this.$player.get(0).tagName + " />", {
"class": "preview-holder",
"data-row": this.$player.attr("data-row"),
"data-col": this.$player.attr("data-col"),
css: {
width: g.width,
height: g.height
}
}).appendTo(this.$el),
this.options.draggable.start && this.options.draggable.start.call(this, b, c)
}
,
h.on_drag = function(a, b) {
if (null === this.$player)
return !1;
var c = this.options.widget_margins
, d = this.$preview_holder.attr("data-col")
, e = this.$preview_holder.attr("data-row")
, f = {
left: b.position.left + this.baseX - c[0] * d,
top: b.position.top + this.baseY - c[1] * e
};
if (this.options.max_cols === 1 / 0) {
var g = this.placeholder_grid_data.col + this.placeholder_grid_data.size_x - 1;
g >= this.cols - 1 && this.options.max_cols >= this.cols + 1 && (this.add_faux_cols(1),
this.set_dom_grid_width(this.cols + 1),
this.drag_api.set_limits(this.cols * this.min_widget_width + (this.cols + 1) * this.options.widget_margins[0])),
this.collision_api.set_colliders(this.faux_grid)
}
this.colliders_data = this.collision_api.get_closest_colliders(f),
this.on_overlapped_column_change(this.on_start_overlapping_column, this.on_stop_overlapping_column),
this.on_overlapped_row_change(this.on_start_overlapping_row, this.on_stop_overlapping_row),
this.helper && this.$player && this.$player.css({
left: b.position.left,
top: b.position.top
}),
this.options.draggable.drag && this.options.draggable.drag.call(this, a, b)
}
,
h.on_stop_drag = function(a, b) {
this.$helper.add(this.$player).add(this.$wrapper).removeClass("dragging");
var c = this.options.widget_margins
, d = this.$preview_holder.attr("data-col")
, e = this.$preview_holder.attr("data-row");
b.position.left = b.position.left + this.baseX - c[0] * d,
b.position.top = b.position.top + this.baseY - c[1] * e,
this.colliders_data = this.collision_api.get_closest_colliders(b.position),
this.on_overlapped_column_change(this.on_start_overlapping_column, this.on_stop_overlapping_column),
this.on_overlapped_row_change(this.on_start_overlapping_row, this.on_stop_overlapping_row),
this.$changed = this.$changed.add(this.$player),
this.placeholder_grid_data.el.coords().grid.col === this.placeholder_grid_data.col && this.placeholder_grid_data.el.coords().grid.row === this.placeholder_grid_data.row || (this.update_widget_position(this.placeholder_grid_data.el.coords().grid, !1),
this.options.collision.wait_for_mouseup && this.for_each_cell_occupied(this.placeholder_grid_data, function(a, b) {
if (this.is_widget(a, b)) {
var c = this.placeholder_grid_data.row + this.placeholder_grid_data.size_y
, d = parseInt(this.gridmap[a][b][0].getAttribute("data-row"))
, e = c - d;
this.move_widget_down(this.is_widget(a, b), e)
}
})),
this.cells_occupied_by_player = this.get_cells_occupied(this.placeholder_grid_data);
var f = this.placeholder_grid_data.col
, g = this.placeholder_grid_data.row;
this.set_cells_player_occupies(f, g),
this.$player.coords().grid.row = g,
this.$player.coords().grid.col = f,
this.$player.addClass("player-revert").removeClass("player").attr({
"data-col": f,
"data-row": g
}).css({
left: "",
top: ""
}),
this.options.draggable.stop && this.options.draggable.stop.call(this, a, b),
this.$preview_holder.remove(),
this.$player = null ,
this.$helper = null ,
this.placeholder_grid_data = {},
this.player_grid_data = {},
this.cells_occupied_by_placeholder = {},
this.cells_occupied_by_player = {},
this.w_queue = {},
this.set_dom_grid_height(),
this.set_dom_grid_width(),
this.options.max_cols === 1 / 0 && this.drag_api.set_limits(this.cols * this.min_widget_width + (this.cols + 1) * this.options.widget_margins[0])
}
,
h.on_start_resize = function(b, c) {
this.$resized_widget = c.$player.closest(".gs-w"),
this.resize_coords = this.$resized_widget.coords(),
this.resize_wgd = this.resize_coords.grid,
this.resize_initial_width = this.resize_coords.coords.width,
this.resize_initial_height = this.resize_coords.coords.height,
this.resize_initial_sizex = this.resize_coords.grid.size_x,
this.resize_initial_sizey = this.resize_coords.grid.size_y,
this.resize_initial_col = this.resize_coords.grid.col,
this.resize_last_sizex = this.resize_initial_sizex,
this.resize_last_sizey = this.resize_initial_sizey,
this.resize_max_size_x = Math.min(this.resize_wgd.max_size_x || this.options.resize.max_size[0], this.options.max_cols - this.resize_initial_col + 1),
this.resize_max_size_y = this.resize_wgd.max_size_y || this.options.resize.max_size[1],
this.resize_min_size_x = this.resize_wgd.min_size_x || this.options.resize.min_size[0] || 1,
this.resize_min_size_y = this.resize_wgd.min_size_y || this.options.resize.min_size[1] || 1,
this.resize_initial_last_col = this.get_highest_occupied_cell().col,
this.set_dom_grid_width(this.cols),
this.resize_dir = {
right: c.$player.is("." + this.resize_handle_class + "-x"),
bottom: c.$player.is("." + this.resize_handle_class + "-y")
},
this.is_responsive() || this.$resized_widget.css({
"min-width": this.options.widget_base_dimensions[0],
"min-height": this.options.widget_base_dimensions[1]
});
var d = this.$resized_widget.get(0).tagName;
this.$resize_preview_holder = a("<" + d + " />", {
"class": "preview-holder resize-preview-holder",
"data-row": this.$resized_widget.attr("data-row"),
"data-col": this.$resized_widget.attr("data-col"),
css: {
width: this.resize_initial_width,
height: this.resize_initial_height
}
}).appendTo(this.$el),
this.$resized_widget.addClass("resizing"),
this.options.resize.start && this.options.resize.start.call(this, b, c, this.$resized_widget),
this.$el.trigger("gridster:resizestart")
}
,
h.on_stop_resize = function(b, c) {
this.$resized_widget.removeClass("resizing").css({
width: "",
height: "",
"min-width": "",
"min-height": ""
}),
delay(a.proxy(function() {
this.$resize_preview_holder.remove().css({
"min-width": "",
"min-height": ""
}),
this.options.resize.stop && this.options.resize.stop.call(this, b, c, this.$resized_widget),
this.$el.trigger("gridster:resizestop")
}, this), 300),
this.set_dom_grid_width(),
this.set_dom_grid_height(),
this.options.max_cols === 1 / 0 && this.drag_api.set_limits(this.cols * this.min_widget_width)
}
,
h.on_resize = function(a, b) {
var c, d = b.pointer.diff_left, e = b.pointer.diff_top, f = this.is_responsive() ? this.get_responsive_col_width() : this.options.widget_base_dimensions[0], g = this.options.widget_base_dimensions[1], h = this.options.widget_margins[0], i = this.options.widget_margins[1], j = this.resize_max_size_x, k = this.resize_min_size_x, l = this.resize_max_size_y, m = this.resize_min_size_y, n = this.options.max_cols === 1 / 0, o = Math.ceil(d / (f + 2 * h) - .2), p = Math.ceil(e / (g + 2 * i) - .2), q = Math.max(1, this.resize_initial_sizex + o), r = Math.max(1, this.resize_initial_sizey + p), s = Math.floor(this.container_width / this.min_widget_width - this.resize_initial_col + 1), t = s * this.min_widget_width + (s - 1) * h;
q = Math.max(Math.min(q, j), k),
q = Math.min(s, q),
c = j * f + (q - 1) * h;
var u = Math.min(c, t)
, v = k * f + (q - 1) * h;
r = Math.max(Math.min(r, l), m);
var w = l * g + (r - 1) * i
, x = m * g + (r - 1) * i;
if (this.resize_dir.right ? r = this.resize_initial_sizey : this.resize_dir.bottom && (q = this.resize_initial_sizex),
n) {
var y = this.resize_initial_col + q - 1;
n && this.resize_initial_last_col <= y && (this.set_dom_grid_width(Math.max(y + 1, this.cols)),
this.cols < y && this.add_faux_cols(y - this.cols))
}
var z = {};
!this.resize_dir.bottom && (z.width = Math.max(Math.min(this.resize_initial_width + d, u), v)),
!this.resize_dir.right && (z.height = Math.max(Math.min(this.resize_initial_height + e, w), x)),
this.$resized_widget.css(z),
q === this.resize_last_sizex && r === this.resize_last_sizey || (this.resize_widget(this.$resized_widget, q, r, !1),
this.set_dom_grid_width(this.cols),
this.$resize_preview_holder.css({
width: "",
height: ""
}).attr({
"data-row": this.$resized_widget.attr("data-row"),
"data-sizex": q,
"data-sizey": r
})),
this.options.resize.resize && this.options.resize.resize.call(this, a, b, this.$resized_widget),
this.$el.trigger("gridster:resize"),
this.resize_last_sizex = q,
this.resize_last_sizey = r
}
,
h.on_overlapped_column_change = function(b, c) {
if (!this.colliders_data.length)
return this;
var d, e = this.get_targeted_columns(this.colliders_data[0].el.data.col), f = this.last_cols.length, g = e.length;
for (d = 0; g > d; d++)
-1 === a.inArray(e[d], this.last_cols) && (b || a.noop).call(this, e[d]);
for (d = 0; f > d; d++)
-1 === a.inArray(this.last_cols[d], e) && (c || a.noop).call(this, this.last_cols[d]);
return this.last_cols = e,
this
}
,
h.on_overlapped_row_change = function(b, c) {
if (!this.colliders_data.length)
return this;
var d, e = this.get_targeted_rows(this.colliders_data[0].el.data.row), f = this.last_rows.length, g = e.length;
for (d = 0; g > d; d++)
-1 === a.inArray(e[d], this.last_rows) && (b || a.noop).call(this, e[d]);
for (d = 0; f > d; d++)
-1 === a.inArray(this.last_rows[d], e) && (c || a.noop).call(this, this.last_rows[d]);
this.last_rows = e
}
,
h.set_player = function(b, c, d) {
var e = this
, f = !1
, g = d ? {
col: b
} : e.colliders_data[0].el.data
, h = g.col
, i = g.row || c;
this.player_grid_data = {
col: h,
row: i,
size_y: this.player_grid_data.size_y,
size_x: this.player_grid_data.size_x
},
this.cells_occupied_by_player = this.get_cells_occupied(this.player_grid_data),
this.cells_occupied_by_placeholder = this.get_cells_occupied(this.placeholder_grid_data);
var j = this.get_widgets_overlapped(this.player_grid_data)
, k = this.player_grid_data.size_y
, l = this.player_grid_data.size_x
, m = this.cells_occupied_by_placeholder
, n = this;
if (j.each(a.proxy(function(b, c) {
var d = a(c)
, e = d.coords().grid
, g = m.cols[0] + l - 1
, o = m.rows[0] + k - 1;
if (d.hasClass(n.options.static_class))
return !0;
if (n.options.collision.wait_for_mouseup && n.drag_api.is_dragging)
n.placeholder_grid_data.col = h,
n.placeholder_grid_data.row = i,
n.cells_occupied_by_placeholder = n.get_cells_occupied(n.placeholder_grid_data),
n.$preview_holder.attr({
"data-row": i,
"data-col": h
});
else if (e.size_x <= l && e.size_y <= k)
if (n.is_swap_occupied(m.cols[0], e.row, e.size_x, e.size_y) || n.is_player_in(m.cols[0], e.row) || n.is_in_queue(m.cols[0], e.row, d))
if (n.is_swap_occupied(g, e.row, e.size_x, e.size_y) || n.is_player_in(g, e.row) || n.is_in_queue(g, e.row, d))
if (n.is_swap_occupied(e.col, m.rows[0], e.size_x, e.size_y) || n.is_player_in(e.col, m.rows[0]) || n.is_in_queue(e.col, m.rows[0], d))
if (n.is_swap_occupied(e.col, o, e.size_x, e.size_y) || n.is_player_in(e.col, o) || n.is_in_queue(e.col, o, d))
if (n.is_swap_occupied(m.cols[0], m.rows[0], e.size_x, e.size_y) || n.is_player_in(m.cols[0], m.rows[0]) || n.is_in_queue(m.cols[0], m.rows[0], d))
for (var p = 0; l > p; p++)
for (var q = 0; k > q; q++) {
var r = m.cols[0] + p
, s = m.rows[0] + q;
if (!n.is_swap_occupied(r, s, e.size_x, e.size_y) && !n.is_player_in(r, s) && !n.is_in_queue(r, s, d)) {
f = n.queue_widget(r, s, d),
p = l;
break
}
}
else
n.options.move_widgets_down_only ? j.each(a.proxy(function(b, c) {
var d = a(c);
n.can_go_down(d) && d.coords().grid.row === n.player_grid_data.row && !n.is_in_queue(g, e.row, d) && (n.move_widget_down(d, n.player_grid_data.size_y),
n.set_placeholder(h, i))
})) : f = n.queue_widget(m.cols[0], m.rows[0], d);
else
f = n.queue_widget(e.col, o, d);
else
f = n.queue_widget(e.col, m.rows[0], d);
else
f = n.queue_widget(g, e.row, d);
else
n.options.move_widgets_down_only ? j.each(a.proxy(function(b, c) {
var d = a(c);
n.can_go_down(d) && d.coords().grid.row === n.player_grid_data.row && !n.is_in_queue(d.coords().grid.col, e.row, d) && (n.move_widget_down(d, n.player_grid_data.size_y),
n.set_placeholder(h, i))
})) : f = n.queue_widget(m.cols[0], e.row, d);
else
n.options.shift_larger_widgets_down && !f && j.each(a.proxy(function(b, c) {
var d = a(c);
n.can_go_down(d) && d.coords().grid.row === n.player_grid_data.row && (n.move_widget_down(d, n.player_grid_data.size_y),
n.set_placeholder(h, i))
}));
n.clean_up_changed()
})),
f && this.can_placeholder_be_set(h, i, l, k)) {
for (var o in this.w_queue) {
var p = parseInt(o.split("_")[0])
, q = parseInt(o.split("_")[1]);
"full" !== this.w_queue[o] && this.new_move_widget_to(this.w_queue[o], p, q)
}
this.set_placeholder(h, i)
}
if (!j.length) {
if (this.options.shift_widgets_up) {
var r = this.can_go_player_up(this.player_grid_data);
r !== !1 && (i = r)
}
this.can_placeholder_be_set(h, i, l, k) && this.set_placeholder(h, i)
}
return this.w_queue = {},
{
col: h,
row: i
}
}
,
h.is_swap_occupied = function(a, b, c, d) {
for (var e = !1, f = 0; c > f; f++)
for (var g = 0; d > g; g++) {
var h = a + f
, i = b + g
, j = h + "_" + i;
if (this.is_occupied(h, i))
e = !0;
else if (j in this.w_queue) {
if ("full" === this.w_queue[j]) {
e = !0;
continue
}
var k = this.w_queue[j]
, l = k.coords().grid;
this.is_widget_under_player(l.col, l.row) || delete this.w_queue[j]
}
i > parseInt(this.options.max_rows) && (e = !0),
h > parseInt(this.options.max_cols) && (e = !0),
this.is_player_in(h, i) && (e = !0)
}
return e
}
,
h.can_placeholder_be_set = function(a, b, c, d) {
for (var e = !0, f = 0; c > f; f++)
for (var g = 0; d > g; g++) {
var h = a + f
, i = b + g
, j = this.is_widget(h, i);
i > parseInt(this.options.max_rows) && (e = !1),
h > parseInt(this.options.max_cols) && (e = !1),
this.is_occupied(h, i) && !this.is_widget_queued_and_can_move(j) && (e = !1)
}
return e
}
,
h.queue_widget = function(a, b, c) {
var d = c
, e = d.coords().grid
, f = a + "_" + b;
if (f in this.w_queue)
return !1;
this.w_queue[f] = d;
for (var g = 0; g < e.size_x; g++)
for (var h = 0; h < e.size_y; h++) {
var i = a + g
, j = b + h
, k = i + "_" + j;
k !== f && (this.w_queue[k] = "full")
}
return !0
}
,
h.is_widget_queued_and_can_move = function(a) {
var b = !1;
if (a === !1)
return !1;
for (var c in this.w_queue)
if ("full" !== this.w_queue[c] && this.w_queue[c].attr("data-col") === a.attr("data-col") && this.w_queue[c].attr("data-row") === a.attr("data-row")) {
b = !0;
for (var d = this.w_queue[c], e = parseInt(c.split("_")[0]), f = parseInt(c.split("_")[1]), g = d.coords().grid, h = 0; h < g.size_x; h++)
for (var i = 0; i < g.size_y; i++) {
var j = e + h
, k = f + i;
this.is_player_in(j, k) && (b = !1)
}
}
return b
}
,
h.is_in_queue = function(a, b, c) {
var d = !1
, e = a + "_" + b;
if (e in this.w_queue)
if ("full" === this.w_queue[e])
d = !0;
else {
var f = this.w_queue[e]
, g = f.coords().grid;
this.is_widget_under_player(g.col, g.row) ? this.w_queue[e].attr("data-col") === c.attr("data-col") && this.w_queue[e].attr("data-row") === c.attr("data-row") ? (delete this.w_queue[e],
d = !1) : d = !0 : (delete this.w_queue[e],
d = !1)
}
return d
}
,
h.widgets_constraints = function(b) {
var c, e = a([]), f = [], g = [];
return b.each(a.proxy(function(b, c) {
var d = a(c)
, h = d.coords().grid;
this.can_go_widget_up(h) ? (e = e.add(d),
f.push(h)) : g.push(h)
}, this)),
c = b.not(e),
{
can_go_up: d.sort_by_row_asc(f),
can_not_go_up: d.sort_by_row_desc(g)
}
}
,
h.manage_movements = function(b, c, d) {
return a.each(b, a.proxy(function(a, b) {
var e = b
, f = e.el
, g = this.can_go_widget_up(e);
if (g)
this.move_widget_to(f, g),
this.set_placeholder(c, g + e.size_y);
else {
var h = this.can_go_player_up(this.player_grid_data);
if (!h) {
var i = d + this.player_grid_data.size_y - e.row;
this.can_go_down(f) && (console.log("In Move Down!"),
this.move_widget_down(f, i),
this.set_placeholder(c, d))
}
}
}, this)),
this
}
,
h.is_player = function(a, b) {
if (b && !this.gridmap[a])
return !1;
var c = b ? this.gridmap[a][b] : a;
return c && (c.is(this.$player) || c.is(this.$helper))
}
,
h.is_player_in = function(b, c) {
var d = this.cells_occupied_by_player || {};
return a.inArray(b, d.cols) >= 0 && a.inArray(c, d.rows) >= 0
}
,
h.is_placeholder_in = function(b, c) {
var d = this.cells_occupied_by_placeholder || {};
return this.is_placeholder_in_col(b) && a.inArray(c, d.rows) >= 0
}
,
h.is_placeholder_in_col = function(b) {
var c = this.cells_occupied_by_placeholder || [];
return a.inArray(b, c.cols) >= 0
}
,
h.is_empty = function(a, b) {
return "undefined" != typeof this.gridmap[a] ? "undefined" != typeof this.gridmap[a][b] && this.gridmap[a][b] === !1 : !0
}
,
h.is_valid_col = function(a, b) {
return this.options.max_cols === 1 / 0 ? !0 : this.cols >= this.calculate_highest_col(a, b)
}
,
h.is_valid_row = function(a, b) {
return this.rows >= this.calculate_highest_row(a, b)
}
,
h.calculate_highest_col = function(a, b) {
return a + (b || 1) - 1
}
,
h.calculate_highest_row = function(a, b) {
return a + (b || 1) - 1
}
,
h.is_occupied = function(a, b) {
return this.gridmap[a] ? !!this.gridmap[a][b] : !1
}
,
h.is_widget = function(a, b) {
var c = this.gridmap[a];
return c ? (c = c[b],
c ? c : !1) : !1
}
,
h.is_static = function(a, b) {
var c = this.gridmap[a];
return c ? (c = c[b],
!(!c || !c.hasClass(this.options.static_class))) : !1
}
,
h.is_widget_under_player = function(a, b) {
return this.is_widget(a, b) ? this.is_player_in(a, b) : !1
}
,
h.get_widgets_under_player = function(b) {
b || (b = this.cells_occupied_by_player || {
cols: [],
rows: []
});
var c = a([]);
return a.each(b.cols, a.proxy(function(d, e) {
a.each(b.rows, a.proxy(function(a, b) {
this.is_widget(e, b) && (c = c.add(this.gridmap[e][b]))
}, this))
}, this)),
c
}
,
h.set_placeholder = function(b, c) {
var d = a.extend({}, this.placeholder_grid_data)
, e = b + d.size_x - 1;
e > this.cols && (b -= e - b);
var f = this.placeholder_grid_data.row < c
, g = this.placeholder_grid_data.col !== b;
if (this.placeholder_grid_data.col = b,
this.placeholder_grid_data.row = c,
this.cells_occupied_by_placeholder = this.get_cells_occupied(this.placeholder_grid_data),
this.$preview_holder.attr({
"data-row": c,
"data-col": b
}),
this.options.shift_player_up) {
if (f || g) {
var h = this.widgets_below({
col: d.col,
row: d.row,
size_y: d.size_y,
size_x: d.size_x
});
h.each(a.proxy(function(b, c) {
var d = a(c)
, e = d.coords().grid
, f = this.can_go_widget_up(e);
f && this.move_widget_to(d, f)
}, this))
}
var i = this.get_widgets_under_player(this.cells_occupied_by_placeholder);
i.length && i.each(a.proxy(function(b, e) {
var f = a(e);
this.move_widget_down(f, c + d.size_y - f.data("coords").grid.row)
}, this))
}
}
,
h.can_go_player_up = function(a) {
var b = a.row + a.size_y - 1
, c = !0
, d = []
, e = 1e4
, f = this.get_widgets_under_player();
return this.for_each_column_occupied(a, function(a) {
var g = this.gridmap[a]
, h = b + 1;
for (d[a] = []; --h > 0 && (this.is_empty(a, h) || this.is_player(a, h) || this.is_widget(a, h) && g[h].is(f)); )
d[a].push(h),
e = e > h ? h : e;
return 0 === d[a].length ? (c = !1,
!0) : void d[a].sort(function(a, b) {
return a - b
})
}),
c ? this.get_valid_rows(a, d, e) : !1
}
,
h.can_go_widget_up = function(a) {
var b = a.row + a.size_y - 1
, c = !0
, d = []
, e = 1e4;
return this.for_each_column_occupied(a, function(f) {
var g = this.gridmap[f];
d[f] = [];
for (var h = b + 1; --h > 0 && (!this.is_widget(f, h) || this.is_player_in(f, h) || g[h].is(a.el)); )
this.is_player(f, h) || this.is_placeholder_in(f, h) || this.is_player_in(f, h) || d[f].push(h),
e > h && (e = h);
return 0 === d[f].length ? (c = !1,
!0) : void d[f].sort(function(a, b) {
return a - b
})
}),
c ? this.get_valid_rows(a, d, e) : !1
}
,
h.get_valid_rows = function(b, c, d) {
for (var e = b.row, f = b.row + b.size_y - 1, g = b.size_y, h = d - 1, i = []; ++h <= f; ) {
var j = !0;
if (a.each(c, function(b, c) {
a.isArray(c) && -1 === a.inArray(h, c) && (j = !1)
}),
j === !0 && (i.push(h),
i.length === g))
break
}
var k = !1;
return 1 === g ? i[0] !== e && (k = i[0] || !1) : i[0] !== e && (k = this.get_consecutive_numbers_index(i, g)),
k
}
,
h.get_consecutive_numbers_index = function(a, b) {
for (var c = a.length, d = [], e = !0, f = -1, g = 0; c > g; g++) {
if (e || a[g] === f + 1) {
if (d.push(g),
d.length === b)
break;
e = !1
} else
d = [],
e = !0;
f = a[g]
}
return d.length >= b ? a[d[0]] : !1
}
,
h.get_widgets_overlapped = function() {
var b = a([])
, c = []
, d = this.cells_occupied_by_player.rows.slice(0);
return d.reverse(),
a.each(this.cells_occupied_by_player.cols, a.proxy(function(e, f) {
a.each(d, a.proxy(function(d, e) {
if (!this.gridmap[f])
return !0;
var g = this.gridmap[f][e];
this.is_occupied(f, e) && !this.is_player(g) && -1 === a.inArray(g, c) && (b = b.add(g),
c.push(g))
}, this))
}, this)),
b
}
,
h.on_start_overlapping_column = function(a) {
this.set_player(a, void 0, !1)
}
,
h.on_start_overlapping_row = function(a) {
this.set_player(void 0, a, !1)
}
,
h.on_stop_overlapping_column = function(a) {
var b = this;
this.options.shift_larger_widgets_down && this.for_each_widget_below(a, this.cells_occupied_by_player.rows[0], function(a, c) {
b.move_widget_up(this, b.player_grid_data.size_y)
})
}
,
h.on_stop_overlapping_row = function(a) {
var b = this
, c = this.cells_occupied_by_player.cols;
if (this.options.shift_larger_widgets_down)
for (var d = 0, e = c.length; e > d; d++)
this.for_each_widget_below(c[d], a, function(a, c) {
b.move_widget_up(this, b.player_grid_data.size_y)
})
}
,
h.new_move_widget_to = function(a, b, c) {
var d = a.coords().grid;
return this.remove_from_gridmap(d),
d.row = c,
d.col = b,
this.add_to_gridmap(d),
a.attr("data-row", c),
a.attr("data-col", b),
this.update_widget_position(d, a),
this.$changed = this.$changed.add(a),
this
}
,
h.move_widget = function(a, b, c, d) {
var e = a.coords().grid
, f = {
col: b,
row: c,
size_x: e.size_x,
size_y: e.size_y
};
return this.mutate_widget_in_gridmap(a, e, f),
this.set_dom_grid_height(),
this.set_dom_grid_width(),
d && d.call(this, f.col, f.row),
a
}
,
h.move_widget_to = function(b, c) {
var d = this
, e = b.coords().grid
, f = this.widgets_below(b)
, g = this.can_move_to(e, e.col, c);
return g === !1 ? !1 : (this.remove_from_gridmap(e),
e.row = c,
this.add_to_gridmap(e),
b.attr("data-row", c),
this.$changed = this.$changed.add(b),
f.each(function(b, c) {
var e = a(c)
, f = e.coords().grid
, g = d.can_go_widget_up(f);
g && g !== f.row && d.move_widget_to(e, g)
}),
this)
}
,
h.move_widget_up = function(b, c) {
if (void 0 === c)
return !1;
var d = b.coords().grid
, e = d.row
, f = [];
return c || (c = 1),
this.can_go_up(b) ? void this.for_each_column_occupied(d, function(d) {
if (-1 === a.inArray(b, f)) {
var g = b.coords().grid
, h = e - c;
if (h = this.can_go_up_to_row(g, d, h),
!h)
return !0;
this.remove_from_gridmap(g),
g.row = h,
this.add_to_gridmap(g),
b.attr("data-row", g.row),
this.$changed = this.$changed.add(b),
f.push(b)
}
}) : !1
}
,
h.move_widget_down = function(b, c) {
var d, e, f, g;
if (0 >= c)
return !1;
if (d = b.coords().grid,
e = d.row,
f = [],
g = c,
!b)
return !1;
if (-1 === a.inArray(b, f)) {
var h = b.coords().grid
, i = e + c
, j = this.widgets_below(b);
this.remove_from_gridmap(h),
j.each(a.proxy(function(b, c) {
var d = a(c)
, e = d.coords().grid
, f = this.displacement_diff(e, h, g);
f > 0 && this.move_widget_down(d, f)
}, this)),
h.row = i,
this.update_widget_position(h, b),
b.attr("data-row", h.row),
this.$changed = this.$changed.add(b),
f.push(b)
}
}
,
h.can_go_up_to_row = function(b, c, d) {
var e, f = !0, g = [], h = b.row;
if (this.for_each_column_occupied(b, function(a) {
for (g[a] = [],
e = h; e-- && this.is_empty(a, e) && !this.is_placeholder_in(a, e); )
g[a].push(e);
return g[a].length ? void 0 : (f = !1,
!0)
}),
!f)
return !1;
for (e = d,
e = 1; h > e; e++) {
for (var i = !0, j = 0, k = g.length; k > j; j++)
g[j] && -1 === a.inArray(e, g[j]) && (i = !1);
if (i === !0) {
f = e;
break
}
}
return f
}
,
h.displacement_diff = function(a, b, c) {
var d = a.row
, e = []
, f = b.row + b.size_y;
this.for_each_column_occupied(a, function(a) {
for (var b = 0, c = f; d > c; c++)
this.is_empty(a, c) && (b += 1);
e.push(b)
});
var g = Math.max.apply(Math, e);
return c -= g,
c > 0 ? c : 0
}
,
h.widgets_below = function(b) {
var c = a([])
, e = a.isPlainObject(b) ? b : b.coords().grid;
if (void 0 === e)
return c;
var f = this
, g = e.row + e.size_y - 1;
return this.for_each_column_occupied(e, function(b) {
f.for_each_widget_below(b, g, function(b, d) {
return f.is_player(this) || -1 !== a.inArray(this, c) ? void 0 : (c = c.add(this),
!0)
})
}),
d.sort_by_row_asc(c)
}
,
h.set_cells_player_occupies = function(a, b) {
return this.remove_from_gridmap(this.placeholder_grid_data),
this.placeholder_grid_data.col = a,
this.placeholder_grid_data.row = b,
this.add_to_gridmap(this.placeholder_grid_data, this.$player),
this
}
,
h.empty_cells_player_occupies = function() {
return this.remove_from_gridmap(this.placeholder_grid_data),
this
}
,
h.can_go_down = function(b) {
var c = !0
, d = this;
return b.hasClass(this.options.static_class) && (c = !1),
this.widgets_below(b).each(function() {
a(this).hasClass(d.options.static_class) && (c = !1)
}),
c
}
,
h.can_go_up = function(a) {
var b = a.coords().grid
, c = b.row
, d = c - 1
, e = !0;
return 1 === c ? !1 : (this.for_each_column_occupied(b, function(a) {
return this.is_occupied(a, d) || this.is_player(a, d) || this.is_placeholder_in(a, d) || this.is_player_in(a, d) ? (e = !1,
!0) : void 0
}),
e)
}
,
h.can_move_to = function(a, b, c) {
var d = a.el
, e = {
size_y: a.size_y,
size_x: a.size_x,
col: b,
row: c
}
, f = !0;
if (this.options.max_cols !== 1 / 0) {
var g = b + a.size_x - 1;
if (g > this.cols)
return !1
}
return this.options.max_rows < c + a.size_y - 1 ? !1 : (this.for_each_cell_occupied(e, function(b, c) {
var e = this.is_widget(b, c);
!e || a.el && !e.is(d) || (f = !1)
}),
f)
}
,
h.get_targeted_columns = function(a) {
for (var b = (a || this.player_grid_data.col) + (this.player_grid_data.size_x - 1), c = [], d = a; b >= d; d++)
c.push(d);
return c
}
,
h.get_targeted_rows = function(a) {
for (var b = (a || this.player_grid_data.row) + (this.player_grid_data.size_y - 1), c = [], d = a; b >= d; d++)
c.push(d);
return c
}
,
h.get_cells_occupied = function(b) {
var c, d = {
cols: [],
rows: []
};
for (arguments[1] instanceof a && (b = arguments[1].coords().grid),
c = 0; c < b.size_x; c++) {
var e = b.col + c;
d.cols.push(e)
}
for (c = 0; c < b.size_y; c++) {
var f = b.row + c;
d.rows.push(f)
}
return d
}
,
h.for_each_cell_occupied = function(a, b) {
return this.for_each_column_occupied(a, function(c) {
this.for_each_row_occupied(a, function(a) {
b.call(this, c, a)
})
}),
this
}
,
h.for_each_column_occupied = function(a, b) {
for (var c = 0; c < a.size_x; c++) {
var d = a.col + c;
b.call(this, d, a)
}
}
,
h.for_each_row_occupied = function(a, b) {
for (var c = 0; c < a.size_y; c++) {
var d = a.row + c;
b.call(this, d, a)
}
}
,
h.clean_up_changed = function() {
var b = this;
b.$changed.each(function() {
b.options.shift_larger_widgets_down && b.move_widget_up(a(this))
})
}
,
h._traversing_widgets = function(b, c, d, e, f) {
var g = this.gridmap;
if (g[d]) {
var h, i, j = b + "/" + c;
if (arguments[2] instanceof a) {
var k = arguments[2].coords().grid;
d = k.col,
e = k.row,
f = arguments[3]
}
var l = []
, m = e
, n = {
"for_each/above": function() {
for (; m-- && !(m > 0 && this.is_widget(d, m) && -1 === a.inArray(g[d][m], l) && (h = f.call(g[d][m], d, m),
l.push(g[d][m]),
h)); )
;
},
"for_each/below": function() {
for (m = e + 1,
i = g[d].length; i > m; m++)
this.is_widget(d, m) && -1 === a.inArray(g[d][m], l) && (h = f.call(g[d][m], d, m),
l.push(g[d][m]))
}
};
n[j] && n[j].call(this)
}
}
,
h.for_each_widget_above = function(a, b, c) {
return this._traversing_widgets("for_each", "above", a, b, c),
this
}
,
h.for_each_widget_below = function(a, b, c) {
return this._traversing_widgets("for_each", "below", a, b, c),
this
}
,
h.get_highest_occupied_cell = function() {
for (var a, b = this.gridmap, c = b[1].length, d = [], e = [], f = b.length - 1; f >= 1; f--)
for (a = c - 1; a >= 1; a--)
if (this.is_widget(f, a)) {
d.push(a),
e.push(f);
break
}
return {
col: Math.max.apply(Math, e),
row: Math.max.apply(Math, d)
}
}
,
h.get_widgets_in_range = function(b, c, d, e) {
var f, g, h, i, j = a([]);
for (f = d; f >= b; f--)
for (g = e; g >= c; g--)
h = this.is_widget(f, g),
h !== !1 && (i = h.data("coords").grid,
i.col >= b && i.col <= d && i.row >= c && i.row <= e && (j = j.add(h)));
return j
}
,
h.get_widgets_at_cell = function(a, b) {
return this.get_widgets_in_range(a, b, a, b)
}
,
h.get_widgets_from = function(b, c) {
var d = a();
return b && (d = d.add(this.$widgets.filter(function() {
var c = parseInt(a(this).attr("data-col"));
return c === b || c > b
}))),
c && (d = d.add(this.$widgets.filter(function() {
var b = parseInt(a(this).attr("data-row"));
return b === c || b > c
}))),
d
}
,
h.set_dom_grid_height = function(a) {
if ("undefined" == typeof a) {
var b = this.get_highest_occupied_cell().row;
a = (b + 1) * this.options.widget_margins[1] + b * this.min_widget_height
}
return this.container_height = a,
this.$el.css("height", this.container_height),
this
}
,
h.set_dom_grid_width = function(a) {
"undefined" == typeof a && (a = this.get_highest_occupied_cell().col);
var b = this.options.max_cols === 1 / 0 ? this.options.max_cols : this.cols;
return a = Math.min(b, Math.max(a, this.options.min_cols)),
this.container_width = (a + 1) * this.options.widget_margins[0] + a * this.min_widget_width,
this.is_responsive() ? (this.$el.css({
"min-width": "100%",
"max-width": "100%"
}),
this) : (this.$el.css("width", this.container_width),
this)
}
,
h.is_responsive = function() {
return this.options.autogenerate_stylesheet && "auto" === this.options.widget_base_dimensions[0] && this.options.max_cols !== 1 / 0
}
,
h.get_responsive_col_width = function() {
var a = this.cols || this.options.max_cols;
return (this.$el[0].clientWidth - 3 - (a + 1) * this.options.widget_margins[0]) / a
}
,
h.resize_responsive_layout = function() {
return this.min_widget_width = this.get_responsive_col_width(),
this.generate_stylesheet(),
this.update_widgets_dimensions(),
this.drag_api.set_limits(this.cols * this.min_widget_width + (this.cols + 1) * this.options.widget_margins[0]),
this
}
,
h.toggle_collapsed_grid = function(a, b) {
return a ? (this.$widgets.css({
"margin-top": b.widget_margins[0],
"margin-bottom": b.widget_margins[0],
"min-height": b.widget_base_dimensions[1]
}),
this.$el.addClass("collapsed"),
this.resize_api && this.disable_resize(),
this.drag_api && this.disable()) : (this.$widgets.css({
"margin-top": "auto",
"margin-bottom": "auto",
"min-height": "auto"
}),
this.$el.removeClass("collapsed"),
this.resize_api && this.enable_resize(),
this.drag_api && this.enable()),
this
}
,
h.generate_stylesheet = function(b) {
var c, e = "", f = this.is_responsive() && this.options.responsive_breakpoint && a(window).width() < this.options.responsive_breakpoint;
b || (b = {}),
b.cols || (b.cols = this.cols),
b.rows || (b.rows = this.rows),
b.namespace || (b.namespace = this.options.namespace),
b.widget_base_dimensions || (b.widget_base_dimensions = this.options.widget_base_dimensions),
b.widget_margins || (b.widget_margins = this.options.widget_margins),
this.is_responsive() && (b.widget_base_dimensions = [this.get_responsive_col_width(), b.widget_base_dimensions[1]],
this.toggle_collapsed_grid(f, b));
var g = a.param(b);
if (a.inArray(g, d.generated_stylesheets) >= 0)
return !1;
for (this.generated_stylesheets.push(g),
d.generated_stylesheets.push(g),
c = 1; c <= b.cols + 1; c++)
e += b.namespace + ' [data-col="' + c + '"] { left:' + (f ? this.options.widget_margins[0] : c * b.widget_margins[0] + (c - 1) * b.widget_base_dimensions[0]) + "px; }\n";
for (c = 1; c <= b.rows + 1; c++)
e += b.namespace + ' [data-row="' + c + '"] { top:' + (c * b.widget_margins[1] + (c - 1) * b.widget_base_dimensions[1]) + "px; }\n";
for (var h = 1; h <= b.rows; h++)
e += b.namespace + ' [data-sizey="' + h + '"] { height:' + (f ? "auto" : h * b.widget_base_dimensions[1] + (h - 1) * b.widget_margins[1]) + (f ? "" : "px") + "; }\n";
for (var i = 1; i <= b.cols; i++) {
var j = i * b.widget_base_dimensions[0] + (i - 1) * b.widget_margins[0];
e += b.namespace + ' [data-sizex="' + i + '"] { width:' + (f ? this.$wrapper.width() - 2 * this.options.widget_margins[0] : j > this.$wrapper.width() ? this.$wrapper.width() : j) + "px; }\n"
}
return this.remove_style_tags(),
this.add_style_tag(e)
}
,
h.add_style_tag = function(a) {
var b = document
, c = "gridster-stylesheet";
if ("" !== this.options.namespace && (c = c + "-" + this.options.namespace),
!document.getElementById(c)) {
var d = b.createElement("style");
d.id = c,
b.getElementsByTagName("head")[0].appendChild(d),
d.setAttribute("type", "text/css"),
d.styleSheet ? d.styleSheet.cssText = a : d.appendChild(document.createTextNode(a)),
this.remove_style_tags(),
this.$style_tags = this.$style_tags.add(d)
}
return this
}
,
h.remove_style_tags = function() {
var b = d.generated_stylesheets
, c = this.generated_stylesheets;
this.$style_tags.remove(),
d.generated_stylesheets = a.map(b, function(b) {
return -1 === a.inArray(b, c) ? b : void 0
})
}
,
h.generate_faux_grid = function(a, b) {
this.faux_grid = [],
this.gridmap = [];
var c, d;
for (c = b; c > 0; c--)
for (this.gridmap[c] = [],
d = a; d > 0; d--)
this.add_faux_cell(d, c);
return this
}
,
h.add_faux_cell = function(b, c) {
var d = a({
left: this.baseX + (c - 1) * this.min_widget_width,
top: this.baseY + (b - 1) * this.min_widget_height,
width: this.min_widget_width,
height: this.min_widget_height,
col: c,
row: b,
original_col: c,
original_row: b
}).coords();
return a.isArray(this.gridmap[c]) || (this.gridmap[c] = []),
"undefined" == typeof this.gridmap[c][b] && (this.gridmap[c][b] = !1),
this.faux_grid.push(d),
this
}
,
h.add_faux_rows = function(a) {
a = window.parseInt(a, 10);
for (var b = this.rows, c = b + parseInt(a || 1), d = c; d > b; d--)
for (var e = this.cols; e >= 1; e--)
this.add_faux_cell(d, e);
return this.rows = c,
this.options.autogenerate_stylesheet && this.generate_stylesheet(),
this
}
,
h.add_faux_cols = function(a) {
a = window.parseInt(a, 10);
var b = this.cols
, c = b + parseInt(a || 1);
c = Math.min(c, this.options.max_cols);
for (var d = b + 1; c >= d; d++)
for (var e = this.rows; e >= 1; e--)
this.add_faux_cell(e, d);
return this.cols = c,
this.options.autogenerate_stylesheet && this.generate_stylesheet(),
this
}
,
h.recalculate_faux_grid = function() {
var b = this.$wrapper.width();
return this.baseX = (f.width() - b) / 2,
this.baseY = this.$wrapper.offset().top,
"relative" === this.$wrapper.css("position") && (this.baseX = this.baseY = 0),
a.each(this.faux_grid, a.proxy(function(a, b) {
this.faux_grid[a] = b.update({
left: this.baseX + (b.data.col - 1) * this.min_widget_width,
top: this.baseY + (b.data.row - 1) * this.min_widget_height
})
}, this)),
this.is_responsive() && this.resize_responsive_layout(),
this.options.center_widgets && this.center_widgets(),
this
}
,
h.resize_widget_dimensions = function(b) {
return b.widget_margins && (this.options.widget_margins = b.widget_margins),
b.widget_base_dimensions && (this.options.widget_base_dimensions = b.widget_base_dimensions),
this.min_widget_width = 2 * this.options.widget_margins[0] + this.options.widget_base_dimensions[0],
this.min_widget_height = 2 * this.options.widget_margins[1] + this.options.widget_base_dimensions[1],
this.$widgets.each(a.proxy(function(b, c) {
var d = a(c);
this.resize_widget(d)
}, this)),
this.generate_grid_and_stylesheet(),
this.get_widgets_from_DOM(),
this.set_dom_grid_height(),
this.set_dom_grid_width(),
this
}
,
h.get_widgets_from_DOM = function() {
var b = this.$widgets.map(a.proxy(function(b, c) {
var d = a(c);
return this.dom_to_coords(d)
}, this));
b = d.sort_by_row_and_col_asc(b);
var c = a(b).map(a.proxy(function(a, b) {
return this.register_widget(b) || null
}, this));
return c.length && this.$el.trigger("gridster:positionschanged"),
this
}
,
h.get_num_widgets = function() {
return this.$widgets.size()
}
,
h.set_num_columns = function(b) {
var c = this.options.max_cols
, d = Math.floor(b / (this.min_widget_width + this.options.widget_margins[0])) + this.options.extra_cols
, e = this.$widgets.map(function() {
return a(this).attr("data-col")
}).get();
e.length || (e = [0]);
var f = Math.max.apply(Math, e);
this.cols = Math.max(f, d, this.options.min_cols),
c !== 1 / 0 && c >= f && c < this.cols && (this.cols = c),
this.drag_api && this.drag_api.set_limits(this.cols * this.min_widget_width + (this.cols + 1) * this.options.widget_margins[0])
}
,
h.generate_grid_and_stylesheet = function() {
var b = this.$wrapper.width();
this.set_num_columns(b);
var c = this.options.extra_rows;
return this.$widgets.each(function(b, d) {
c += +a(d).attr("data-sizey")
}),
this.rows = this.options.max_rows,
this.baseX = (f.width() - b) / 2,
this.baseY = this.$wrapper.offset().top,
this.options.autogenerate_stylesheet && this.generate_stylesheet(),
this.generate_faux_grid(this.rows, this.cols)
}
,
h.destroy = function(b) {
return this.$el.removeData("gridster"),
a.each(this.$widgets, function() {
a(this).removeData("coords")
}),
f.unbind(".gridster"),
this.drag_api && this.drag_api.destroy(),
this.resize_api && this.resize_api.destroy(),
this.$widgets.each(function(b, c) {
a(c).coords().destroy()
}),
this.resize_api && this.resize_api.destroy(),
this.remove_style_tags(),
b && this.$el.remove(),
this
}
,
a.fn.gridster = function(b) {
return this.each(function() {
var c = a(this);
c.data("gridster") || c.data("gridster", new d(this,b))
})
}
,
d
});
css、demo.css
/*! gridster.js - v0.6.10 - 2015-05-31
* https://dsmorse.github.io/gridster.js/
* Copyright (c) 2015 ducksboard; Licensed MIT */
body {
background: #26941f;
font-size: 16px;
font-family: 'Helvetica Neue', Arial, sans-serif;
color: #ffffff;
margin: 0;
}
h1,
h2,
h3,
p {
margin: 10px;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.demo {
margin: 3em 0;
padding: 7.5em 0 5.5em;
background: #26941f;
}
.demo:hover .gridster {
margin: 0 auto;
opacity: .8;
-webkit-transition: opacity .6s;
-moz-transition: opacity .6s;
-o-transition: opacity .6s;
-ms-transition: opacity .6s;
transition: opacity .6s;
}
.content {
color: white;
}
.gridster .gs-w {
background: #61A9CF;
cursor: pointer;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.gridster .player {
-webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
background: #BBB;
}
.gridster .gs-w.try {
background-image: url(../img/sprite.png);
background-repeat: no-repeat;
background-position: 37px -169px;
}
.gridster .preview-holder {
border: none !important;
border-radius: 0 !important;
background: red !important;
}
.gridster ul {
background-color: #EFEFEF;
}
.gridster li {
font-size: 1em;
font-weight: bold;
text-align: center;
line-height: 100%;
}
ul {
list-style-type: none;
}
li {
list-style: none;
font-weight: bold;
}
.gridster-box {
position: relative;
width: 50%;
height: 100%;
}
.controls {
margin-bottom: 20px;
}
/*# sourceMappingURL=demos/assets/css/demo.css.map */
.gridster{
width:1520px;
float:left;
}
.gridster ul{
padding:0;
}
.gridster-list{
margin-top:16px;
margin-left:1570px;
float:left;
width:220px;
height:760px;
background:#fff;
overflow-y: scroll;
position:fixed;
}
.gridster-list ul{
margin:0;
padding:0;
}
.gridster-list li{
width:180px;
margin:10px;
height:90px;
background:#61A9CF;
}
.gridster-list li p{
color:#fff;
font-size:18px;
text-align:center;
height:90px;
line-height:90px;
}
css、jquery.gridster.min.css
/*! gridster.js - v0.7.0 - 2016-02-26 - * https://dsmorse.github.io/gridster.js/ - Copyright (c) 2016 ducksboard; Licensed MIT */
.gridster{position:relative}.gridster>*{-webkit-transition:height .4s,width .4s;-moz-transition:height .4s,width .4s;-o-transition:height .4s,width .4s;-ms-transition:height .4s,width .4s;transition:height .4s,width .4s}.gridster .gs-w{z-index:2;position:absolute}.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.collapsed{height:auto!important}.gridster.collapsed .gs-w{position:static!important}.ready .gs-w:not(.preview-holder),.ready .resize-preview-holder{-webkit-transition:opacity .3s,left .3s,top .3s,width .3s,height .3s;-moz-transition:opacity .3s,left .3s,top .3s,width .3s,height .3s;-o-transition:opacity .3s,left .3s,top .3s,width .3s,height .3s;transition:opacity .3s,left .3s,top .3s,width .3s,height .3s}.gridster .dragging,.gridster .resizing{z-index:10!important;-webkit-transition:all 0s!important;-moz-transition:all 0s!important;-o-transition:all 0s!important;transition:all 0s!important}.gs-resize-handle{position:absolute;z-index:1}.gs-resize-handle-both{width:20px;height:20px;bottom:-8px;right:-8px;background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pg08IS0tIEdlbmVyYXRvcjogQWRvYmUgRmlyZXdvcmtzIENTNiwgRXhwb3J0IFNWRyBFeHRlbnNpb24gYnkgQWFyb24gQmVhbGwgKGh0dHA6Ly9maXJld29ya3MuYWJlYWxsLmNvbSkgLiBWZXJzaW9uOiAwLjYuMSAgLS0+DTwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DTxzdmcgaWQ9IlVudGl0bGVkLVBhZ2UlMjAxIiB2aWV3Qm94PSIwIDAgNiA2IiBzdHlsZT0iYmFja2dyb3VuZC1jb2xvcjojZmZmZmZmMDAiIHZlcnNpb249IjEuMSINCXhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiDQl4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjZweCIgaGVpZ2h0PSI2cHgiDT4NCTxnIG9wYWNpdHk9IjAuMzAyIj4NCQk8cGF0aCBkPSJNIDYgNiBMIDAgNiBMIDAgNC4yIEwgNCA0LjIgTCA0LjIgNC4yIEwgNC4yIDAgTCA2IDAgTCA2IDYgTCA2IDYgWiIgZmlsbD0iIzAwMDAwMCIvPg0JPC9nPg08L3N2Zz4=);background-position:top left;background-repeat:no-repeat;cursor:se-resize;z-index:20}.gs-resize-handle-x{top:0;bottom:13px;right:-5px;width:10px;cursor:e-resize}.gs-resize-handle-y{left:0;right:13px;bottom:-5px;height:10px;cursor:s-resize}.gs-w:hover .gs-resize-handle,.resizing .gs-resize-handle{opacity:1}.gs-resize-handle,.gs-w.dragging .gs-resize-handle{opacity:0}.gs-resize-disabled .gs-resize-handle,[data-max-sizex="1"] .gs-resize-handle-x,[data-max-sizey="1"] .gs-resize-handle-y,[data-max-sizey="1"][data-max-sizex="1"] .gs-resize-handle{display:none!important}
css、normalize.css
/*! normalize.css v1.1.0 | MIT License | git.io/normalize */
/* ==========================================================================
HTML5 display definitions
========================================================================== */
/**
* Correct `block` display not defined in IE 6/7/8/9 and Firefox 3.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}
/**
* Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
*/
audio,
canvas,
video {
display: inline-block;
*display: inline;
*zoom: 1;
}
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
* Known issue: no IE 6 support.
*/
[hidden] {
display: none;
}
/* ==========================================================================
Base
========================================================================== */
/**
* 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
* `em` units.
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
font-size: 100%; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
-ms-text-size-adjust: 100%; /* 2 */
}
/**
* Address `font-family` inconsistency between `textarea` and other form
* elements.
*/
html,
button,
input,
select,
textarea {
font-family: sans-serif;
}
/**
* Address margins handled incorrectly in IE 6/7.
*/
body {
margin: 0;
}
/* ==========================================================================
Links
========================================================================== */
/**
* Address `outline` inconsistency between Chrome and other browsers.
*/
a:focus {
outline: thin dotted;
}
/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0;
}
/* ==========================================================================
Typography
========================================================================== */
/**
* Address font sizes and margins set differently in IE 6/7.
* Address font sizes within `section` and `article` in Firefox 4+, Safari 5,
* and Chrome.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
h2 {
font-size: 1.5em;
margin: 0.83em 0;
}
h3 {
font-size: 1.17em;
margin: 1em 0;
}
h4 {
font-size: 1em;
margin: 1.33em 0;
}
h5 {
font-size: 0.83em;
margin: 1.67em 0;
}
h6 {
font-size: 0.67em;
margin: 2.33em 0;
}
/**
* Address styling not present in IE 7/8/9, Safari 5, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted;
}
/**
* Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
*/
b,
strong {
font-weight: bold;
}
blockquote {
margin: 1em 40px;
}
/**
* Address styling not present in Safari 5 and Chrome.
*/
dfn {
font-style: italic;
}
/**
* Address differences between Firefox and other browsers.
* Known issue: no IE 6/7 normalization.
*/
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
/**
* Address styling not present in IE 6/7/8/9.
*/
mark {
background: #ff0;
color: #000;
}
/**
* Address margins set differently in IE 6/7.
*/
p,
pre {
margin: 1em 0;
}
/**
* Correct font family set oddly in IE 6, Safari 4/5, and Chrome.
*/
code,
kbd,
pre,
samp {
font-family: monospace, serif;
_font-family: 'courier new', monospace;
font-size: 1em;
}
/**
* Improve readability of pre-formatted text in all browsers.
*/
pre {
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
}
/**
* Address CSS quotes not supported in IE 6/7.
*/
q {
quotes: none;
}
/**
* Address `quotes` property not supported in Safari 4.
*/
q:before,
q:after {
content: '';
content: none;
}
/**
* Address inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* ==========================================================================
Lists
========================================================================== */
/**
* Address margins set differently in IE 6/7.
*/
dl,
menu,
ol,
ul {
margin: 1em 0;
}
dd {
margin: 0 0 0 40px;
}
/**
* Address paddings set differently in IE 6/7.
*/
menu,
ol,
ul {
padding: 0 0 0 40px;
}
/**
* Correct list images handled incorrectly in IE 7.
*/
nav ul,
nav ol {
list-style: none;
list-style-image: none;
}
/* ==========================================================================
Embedded content
========================================================================== */
/**
* 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
* 2. Improve image quality when scaled in IE 7.
*/
img {
border: 0; /* 1 */
-ms-interpolation-mode: bicubic; /* 2 */
}
/**
* Correct overflow displayed oddly in IE 9.
*/
svg:not(:root) {
overflow: hidden;
}
/* ==========================================================================
Figures
========================================================================== */
/**
* Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
*/
figure {
margin: 0;
}
/* ==========================================================================
Forms
========================================================================== */
/**
* Correct margin displayed oddly in IE 6/7.
*/
form {
margin: 0;
}
/**
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct color not being inherited in IE 6/7/8/9.
* 2. Correct text not wrapping in Firefox 3.
* 3. Correct alignment displayed oddly in IE 6/7.
*/
legend {
border: 0; /* 1 */
padding: 0;
white-space: normal; /* 2 */
*margin-left: -7px; /* 3 */
}
/**
* 1. Correct font size not being inherited in all browsers.
* 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
* and Chrome.
* 3. Improve appearance and consistency in all browsers.
*/
button,
input,
select,
textarea {
font-size: 100%; /* 1 */
margin: 0; /* 2 */
vertical-align: baseline; /* 3 */
*vertical-align: middle; /* 3 */
}
/**
* Address Firefox 3+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
button,
input {
line-height: normal;
}
/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
* Correct `select` style inheritance in Firefox 4+ and Opera.
*/
button,
select {
text-transform: none;
}
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
* 4. Remove inner spacing in IE 7 without affecting normal text inputs.
* Known issue: inner spacing remains in IE 6.
*/
button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */
*overflow: visible; /* 4 */
}
/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
cursor: default;
}
/**
* 1. Address box sizing set to content-box in IE 8/9.
* 2. Remove excess padding in IE 8/9.
* 3. Remove excess padding in IE 7.
* Known issue: excess padding remains in IE 6.
*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
*height: 13px; /* 3 */
*width: 13px; /* 3 */
}
/**
* 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
* (include `-moz` to future-proof).
*/
input[type="search"] {
-webkit-appearance: textfield; /* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; /* 2 */
box-sizing: content-box;
}
/**
* Remove inner padding and search cancel button in Safari 5 and Chrome
* on OS X.
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* Remove inner padding and border in Firefox 3+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/**
* 1. Remove default vertical scrollbar in IE 6/7/8/9.
* 2. Improve readability and alignment in all browsers.
*/
textarea {
overflow: auto; /* 1 */
vertical-align: top; /* 2 */
}
/* ==========================================================================
Tables
========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}