Skip to content

Commit e192405

Browse files
committed
feat(gridster): drag-and-drop widget resizing
1 parent 65d93a4 commit e192405

File tree

2 files changed

+367
-13
lines changed

2 files changed

+367
-13
lines changed

src/jquery.gridster.css

Lines changed: 58 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,15 +47,71 @@
4747
transition: left .3s, top .3s!important;
4848
}
4949

50-
.gridster .dragging {
50+
.gridster .dragging,
51+
.gridster .resizing {
5152
z-index: 10!important;
5253
-webkit-transition: all 0s !important;
5354
-moz-transition: all 0s !important;
5455
-o-transition: all 0s !important;
5556
transition: all 0s !important;
5657
}
5758

59+
60+
.gs-resize-handle {
61+
position: absolute;
62+
z-index: 1;
63+
}
64+
65+
.gs-resize-handle-both {
66+
width: 20px;
67+
height: 20px;
68+
bottom: -8px;
69+
right: -8px;
70+
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pg08IS0tIEdlbmVyYXRvcjogQWRvYmUgRmlyZXdvcmtzIENTNiwgRXhwb3J0IFNWRyBFeHRlbnNpb24gYnkgQWFyb24gQmVhbGwgKGh0dHA6Ly9maXJld29ya3MuYWJlYWxsLmNvbSkgLiBWZXJzaW9uOiAwLjYuMSAgLS0+DTwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DTxzdmcgaWQ9IlVudGl0bGVkLVBhZ2UlMjAxIiB2aWV3Qm94PSIwIDAgNiA2IiBzdHlsZT0iYmFja2dyb3VuZC1jb2xvcjojZmZmZmZmMDAiIHZlcnNpb249IjEuMSINCXhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiDQl4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjZweCIgaGVpZ2h0PSI2cHgiDT4NCTxnIG9wYWNpdHk9IjAuMzAyIj4NCQk8cGF0aCBkPSJNIDYgNiBMIDAgNiBMIDAgNC4yIEwgNCA0LjIgTCA0LjIgNC4yIEwgNC4yIDAgTCA2IDAgTCA2IDYgTCA2IDYgWiIgZmlsbD0iIzAwMDAwMCIvPg0JPC9nPg08L3N2Zz4=');
71+
background-position: top left;
72+
background-repeat: no-repeat;
73+
cursor: se-resize;
74+
z-index: 20;
75+
}
76+
77+
.gs-resize-handle-x {
78+
top: 0;
79+
bottom: 13px;
80+
right: -5px;
81+
width: 10px;
82+
cursor: e-resize;
83+
}
84+
85+
.gs-resize-handle-y {
86+
left: 0;
87+
right: 13px;
88+
bottom: -5px;
89+
height: 10px;
90+
cursor: s-resize;
91+
}
92+
93+
.gs-w:hover .gs-resize-handle,
94+
.resizing .gs-resize-handle {
95+
opacity: 1;
96+
}
97+
98+
.gs-resize-handle,
99+
.gs-w.dragging .gs-resize-handle {
100+
opacity: 0;
101+
}
102+
103+
.gs-resize-disabled .gs-resize-handle {
104+
display: none!important;
105+
}
106+
107+
[data-max-sizex="1"] .gs-resize-handle-x,
108+
[data-max-sizey="1"] .gs-resize-handle-y,
109+
[data-max-sizey="1"][data-max-sizex="1"] .gs-resize-handle {
110+
display: none !important;
111+
}
112+
58113
/* Uncomment this if you set helper : "clone" in draggable options */
59114
/*.gridster .player {
60115
opacity:0;
61-
}*/
116+
}
117+
*/

0 commit comments

Comments
 (0)