Skip to content

Commit

Permalink
Merge pull request dattn#40 from irongollem/master
Browse files Browse the repository at this point in the history 
Touch enabled
  • Loading branch information
@dattn
dattn committed Oct 1, 2019
2 parents cde3c06 + 24c178b commit 0ae3663
Show file tree
Hide file tree
Showing 5 changed files with 123 additions and 13,527 deletions.
6 changes: 6 additions & 0 deletions .npmignore
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
.DS_Store
node_modules
/demo
npm-debug.log
yarn-error.log
.idea
47 changes: 38 additions & 9 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ The **components** require **Vue >= 2.0.0**
<dnd-grid-box :boxId="box1Id">
<h1>Box 1</h1>
</dnd-grid-box>
<dnd-grid-box :boxId="box2Id">
<dnd-grid-box :boxId="box2Id" resizeVisible>
<h1>Box 2</h1>
</dnd-grid-box>
...
Expand Down Expand Up @@ -53,20 +53,49 @@ The **components** require **Vue >= 2.0.0**
...
]
```

| Property | Description |
| --------------- | ----------------------------------------------------------------------- |
| id | The id of the box linked with this box layout (must be unique) |
| hidden | hide or show the box |
| pinned | If pinned, the box can not be dragged/resized and always stays in place |
| position | The position/size in the grid |
## Container:

| Property | Default | Description |
|----------------------- | --------------- | ------------------------------------------------------------------------- |
| layout | | Array of objects each representing a box with the below Object properties |
| - id | | The id of the box linked with this box layout (must be unique) |
| - hidden | | hide or show the box |
| - pinned | | If pinned, the box can not be dragged/resized and always stays in place |
| - position | | The position/size in the grid |
| - - x | | The x position in the grid by cells |
| - - y | | The y position in the grid by cells |
| - - w | | The width in the grid by cells |
| - - h | | The height in the grid by cells |
| cellSize | | Object describing the default cell size |
| - w | 100 | Width in pixels |
| - h | 100 | Height in pixels |
| maxColumnCount | infinity | Integer max columns |
| maxRowCount | infinity | Integer max rows |
| margin | 5 | Integer in pixels |
| outerMargin | 0 | Integer in pixels |
| bubbleUp | false | Boolean when true bubbles boxes to the top of the screen |
| autoAddLayoutForNewBox | true | Boolean |
| defaultSize | | Default size of a new box |
| - w | 1 | Width in cells |
| - h | 1 | Height in cells |
| fixLayoutOnLoad | true | Boolean describing to fix layout (overlaps) on load |

## Box:

| Property | DEFAULT | Description |
|----------------------- | --------------- | ------------------------------------------------------------------------- |
| boxId | ! | String, Box id, this is a required field |
| dragSelector | * | String, id of the element by which you can drag the box |
| resizeVisible | false | Boolean, displays a circle the corner of boxes on mobile devices |

## Installation

### Using npm
### Using npm or yarn

`npm i --save @dattn/dnd-grid`

`yarn install @dattn/dnd-grid`

### How to import (using ES6 import)

```javascript
Expand Down
Loading

0 comments on commit 0ae3663

Please sign in to comment.