31 |
jQuery Gridly
32 |
Gridly is a jQuery plugin to enable dragging and dropping as well as resizing on a grids. In the example below try tapping or dragging any of the bricks.
33 |
Example
34 |
35 |
36 |
39 |
42 |
45 |
48 |
51 |
54 |
57 |
60 |
63 |
66 |
69 |
72 |
75 |
78 |
81 |
84 |
87 |
90 |
93 |
96 |
98 | Add
99 |
100 |
101 |
Installation
102 |
To install download one of these packages and include the jquery.gridly.js and jquery.gridly.css files in your head with the following:
103 |
111 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js" type="text/javascript"></script>
<script src="javascript/jquery.gridly.js" type="text/javascript"></script>
<link href="stylesheets/jquery.gridly.css" rel="stylesheet" type="text/css" />
112 |
Example
113 |
Setting up a gridly is easy. The following snippet is a good start:
114 |
<style type="text/css">
.gridly {
position: relative;
width: 960px;
}
.brick.small {
width: 140px;
height: 140px;
}
.brick.large {
width: 300px;
height: 300px;
}
</style>
<div class="gridly">
<div class="brick small"></div>
<div class="brick small"></div>
<div class="brick large"></div>
<div class="brick small"></div>
<div class="brick small"></div>
<div class="brick large"></div>
</div>
<script>
$('.gridly').gridly({
base: 60, // px
gutter: 20, // px
columns: 12
});
</script>
115 |
116 | Copyright (c) 2013 - 2015
117 | Kevin Sylvestre
118 |
119 |
120 | GitHub
121 | Google
122 | Twitter
123 |
124 |
29 |