improve touch support
This commit is contained in:
Pavel Reznikov
parent
206616a109
commit
bbe9a08caf
5 changed files with 32 additions and 4 deletions
23
README.md
23
README.md
|
|
@ -51,6 +51,8 @@ $(function () {
|
|||
|
||||
## Options
|
||||
|
||||
- `always_show_resize_handle` - if `true` the resizing handles are shown even the user is not hovering over the widget
|
||||
(default: `false`)
|
||||
- `animate` - turns animation on (default: `false`)
|
||||
- `auto` - if `false` it tells to do not initialize existing items (default: `true`)
|
||||
- `cell_height` - one cell height (default: `60`)
|
||||
|
|
@ -251,6 +253,22 @@ Sorts array of nodes
|
|||
- `dir` - `1` for asc, `-1` for desc
|
||||
- `width` - width of the grid. If `undefined` the width will be calculated automatically.
|
||||
|
||||
## Touch devices support
|
||||
|
||||
Please use (jQuery UI Touch Punch)[https://github.com/furf/jquery-ui-touch-punch] to make jQuery UI Draggable/Resizable
|
||||
working on touch-based devices.
|
||||
|
||||
Also `always_show_resize_handle` option may be useful:
|
||||
|
||||
```javascript
|
||||
$(function () {
|
||||
var options = {
|
||||
always_show_resize_handle: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
|
||||
};
|
||||
$('.grid-stack').gridstack(options);
|
||||
});
|
||||
```
|
||||
|
||||
## Use with knockout.js
|
||||
|
||||
```javascript
|
||||
|
|
@ -339,6 +357,11 @@ and so on.
|
|||
Changes
|
||||
=======
|
||||
|
||||
#### v0.2.3 (currently development version)
|
||||
|
||||
- improved touch devices support
|
||||
- add `always_show_resize_handle` option
|
||||
|
||||
#### v0.2.2 (2014-12-23)
|
||||
|
||||
- fix grid initialization
|
||||
|
|
|
|||
2
dist/gridstack.min.css
vendored
2
dist/gridstack.min.css
vendored
|
|
@ -1 +1 @@
|
|||
.grid-stack{position:relative}.grid-stack-item{position:absolute;padding:0}.grid-stack-item .grid-stack-item-content,.grid-stack-item .placeholder-content{margin:0;position:absolute;top:0;left:10px;right:10px;bottom:0;width:auto;z-index:0 !important;overflow:auto}.grid-stack-placeholder .placeholder-content{border:1px dashed lightgray}.grid-stack-item.ui-draggable-dragging,.grid-stack-item.ui-resizable-resizing{z-index:100}.grid-stack-item.ui-draggable-dragging .grid-stack-item-content,.grid-stack-item.ui-resizable-resizing .grid-stack-item-content{box-shadow:1px 4px 6px rgba(0,0,0,0.2);opacity:.8}.grid-stack-item .ui-resizable-handle{padding:3px;margin:3px 0;cursor:nwse-resize;color:gray;position:absolute;bottom:0;right:15px;font:normal normal normal 14px/1 FontAwesome;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);font-size:10px}.grid-stack-item .ui-resizable-handle::before{content:"\f065"}.grid-stack-item[data-gs-width="12"]{width:100%}.grid-stack-item[data-gs-width="11"]{width:91.66666667%}.grid-stack-item[data-gs-width="10"]{width:83.33333333%}.grid-stack-item[data-gs-width="9"]{width:75%}.grid-stack-item[data-gs-width="8"]{width:66.66666667%}.grid-stack-item[data-gs-width="7"]{width:58.33333333%}.grid-stack-item[data-gs-width="6"]{width:50%}.grid-stack-item[data-gs-width="5"]{width:41.66666667%}.grid-stack-item[data-gs-width="4"]{width:33.33333333%}.grid-stack-item[data-gs-width="3"]{width:25%}.grid-stack-item[data-gs-width="2"]{width:16.66666667%}.grid-stack-item[data-gs-width="1"]{width:8.33333333%}.grid-stack-item[data-gs-x="12"]{left:100%}.grid-stack-item[data-gs-x="11"]{left:91.66666667%}.grid-stack-item[data-gs-x="10"]{left:83.33333333%}.grid-stack-item[data-gs-x="9"]{left:75%}.grid-stack-item[data-gs-x="8"]{left:66.66666667%}.grid-stack-item[data-gs-x="7"]{left:58.33333333%}.grid-stack-item[data-gs-x="6"]{left:50%}.grid-stack-item[data-gs-x="5"]{left:41.66666667%}.grid-stack-item[data-gs-x="4"]{left:33.33333333%}.grid-stack-item[data-gs-x="3"]{left:25%}.grid-stack-item[data-gs-x="2"]{left:16.66666667%}.grid-stack-item[data-gs-x="1"]{left:8.33333333%}@media(max-width:768px){.grid-stack-item{position:relative !important;width:auto !important;left:0 !important;top:auto !important;margin-bottom:20px}.grid-stack{height:auto !important}}.grid-stack.grid-stack-animate,.grid-stack.grid-stack-animate .grid-stack-item{-webkit-transition:left .3s,top .3s,height .3s,width .3s;-moz-transition:left .3s,top .3s,height .3s,width .3s;-o-transition:left .3s,top .3s,height .3s,width .3s;-ms-transition:left .3s,top .3s,height .3s,width .3s;transition:left .3s,top .3s,height .3s,width .3s}.grid-stack.grid-stack-animate .grid-stack-item.ui-draggable-dragging,.grid-stack.grid-stack-animate .grid-stack-item.ui-resizable-resizing,.grid-stack.grid-stack-animate .grid-stack-item.grid-stack-placeholder{-webkit-transition:left 0,top 0,height 0,width 0;-moz-transition:left 0,top 0,height 0,width 0;-o-transition:left 0,top 0,height 0,width 0;transition:left 0,top 0,height 0,width 0}
|
||||
.grid-stack{position:relative}.grid-stack-item{position:absolute;padding:0}.grid-stack-item .grid-stack-item-content,.grid-stack-item .placeholder-content{margin:0;position:absolute;top:0;left:10px;right:10px;bottom:0;width:auto;z-index:0 !important;overflow:auto}.grid-stack-placeholder .placeholder-content{border:1px dashed lightgray}.grid-stack-item.ui-draggable-dragging,.grid-stack-item.ui-resizable-resizing{z-index:100}.grid-stack-item.ui-draggable-dragging .grid-stack-item-content,.grid-stack-item.ui-resizable-resizing .grid-stack-item-content{box-shadow:1px 4px 6px rgba(0,0,0,0.2);opacity:.8}.grid-stack-item .ui-resizable-handle{padding:3px;margin:3px 0;cursor:nwse-resize;color:gray;position:absolute;bottom:0;right:15px;font:normal normal normal 14px/1 FontAwesome;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);font-size:10px}.grid-stack-item .ui-resizable-handle::before{content:"\f065"}.grid-stack-item[data-gs-width="12"]{width:100%}.grid-stack-item[data-gs-width="11"]{width:91.66666667%}.grid-stack-item[data-gs-width="10"]{width:83.33333333%}.grid-stack-item[data-gs-width="9"]{width:75%}.grid-stack-item[data-gs-width="8"]{width:66.66666667%}.grid-stack-item[data-gs-width="7"]{width:58.33333333%}.grid-stack-item[data-gs-width="6"]{width:50%}.grid-stack-item[data-gs-width="5"]{width:41.66666667%}.grid-stack-item[data-gs-width="4"]{width:33.33333333%}.grid-stack-item[data-gs-width="3"]{width:25%}.grid-stack-item[data-gs-width="2"]{width:16.66666667%}.grid-stack-item[data-gs-width="1"]{width:8.33333333%}.grid-stack-item[data-gs-x="12"]{left:100%}.grid-stack-item[data-gs-x="11"]{left:91.66666667%}.grid-stack-item[data-gs-x="10"]{left:83.33333333%}.grid-stack-item[data-gs-x="9"]{left:75%}.grid-stack-item[data-gs-x="8"]{left:66.66666667%}.grid-stack-item[data-gs-x="7"]{left:58.33333333%}.grid-stack-item[data-gs-x="6"]{left:50%}.grid-stack-item[data-gs-x="5"]{left:41.66666667%}.grid-stack-item[data-gs-x="4"]{left:33.33333333%}.grid-stack-item[data-gs-x="3"]{left:25%}.grid-stack-item[data-gs-x="2"]{left:16.66666667%}.grid-stack-item[data-gs-x="1"]{left:8.33333333%}@media(max-width:768px){.grid-stack-item{position:relative !important;width:auto !important;left:0 !important;top:auto !important;margin-bottom:20px}.grid-stack-item .ui-resizable-handle{display:none}.grid-stack{height:auto !important}}.grid-stack.grid-stack-animate,.grid-stack.grid-stack-animate .grid-stack-item{-webkit-transition:left .3s,top .3s,height .3s,width .3s;-moz-transition:left .3s,top .3s,height .3s,width .3s;-o-transition:left .3s,top .3s,height .3s,width .3s;-ms-transition:left .3s,top .3s,height .3s,width .3s;transition:left .3s,top .3s,height .3s,width .3s}.grid-stack.grid-stack-animate .grid-stack-item.ui-draggable-dragging,.grid-stack.grid-stack-animate .grid-stack-item.ui-resizable-resizing,.grid-stack.grid-stack-animate .grid-stack-item.grid-stack-placeholder{-webkit-transition:left 0,top 0,height 0,width 0;-moz-transition:left 0,top 0,height 0,width 0;-o-transition:left 0,top 0,height 0,width 0;transition:left 0,top 0,height 0,width 0}
|
||||
2
dist/gridstack.min.js
vendored
2
dist/gridstack.min.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -97,6 +97,10 @@
|
|||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.grid-stack-item .ui-resizable-handle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.grid-stack {
|
||||
height: auto !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -331,7 +331,8 @@
|
|||
min_width: 768,
|
||||
float: false,
|
||||
_class: 'grid-stack-' + (Math.random() * 10000).toFixed(0),
|
||||
animate: Boolean(this.container.attr('data-gs-animate')) || false
|
||||
animate: Boolean(this.container.attr('data-gs-animate')) || false,
|
||||
always_show_resize_handle: opts.always_show_resize_handle || false
|
||||
});
|
||||
|
||||
this.container.addClass(this.opts._class);
|
||||
|
|
@ -524,7 +525,7 @@
|
|||
self._update_container_height();
|
||||
}
|
||||
}).resizable({
|
||||
autoHide: true,
|
||||
autoHide: !this.opts.always_show_resize_handle,
|
||||
handles: 'se',
|
||||
minHeight: this.opts.cell_height - 10,
|
||||
minWidth: 70,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue