# dnd-grid-external

> It is fork form https://github.com/dattn/dnd-grid

Latest version **0.0.14-rc7** (published 2019-01-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install dnd-grid-external
pnpm add dnd-grid-external
yarn add dnd-grid-external
bun add dnd-grid-external
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.14-rc7 |
| Published | 2019-01-21 |
| First published | 2019-01-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 57.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Alexander Mykulych |
| Maintainers | alex.mykulych |
| Keywords | vue, component |

## Links

- npm: https://www.npmjs.com/package/dnd-grid-external
- Repository: https://github.com/AlexanderMykulych/dnd-grid
- Homepage: https://github.com/AlexanderMykulych/dnd-grid#readme
- Issues: https://github.com/AlexanderMykulych/dnd-grid/issues
- npm.io page: https://npm.io/package/dnd-grid-external

## Recent versions

- 0.0.14-rc7 (latest) — 2019-01-21
- 0.0.14-rc6 — 2019-01-21
- 0.0.14-rc5 — 2019-01-21
- 0.0.14-rc4 — 2019-01-21
- 0.0.14-rc3 — 2019-01-21
- 0.0.14-rc2 — 2019-01-21
- 0.0.14-rc1 — 2019-01-21
- 0.0.14 — 2019-01-21

## README

# dnd-grid

> A vuejs grid with draggable and resizable boxes

[Demo page](https://dnd-grid.duton.lu/)

The **demo** requires **Vue >= 2.3.0** because of the ":layout.sync" feature

The **components** require **Vue >= 2.0.0**

# Usage

## Example

```html
<dnd-grid-container :layout.sync="layoutJson">
    <dnd-grid-box :boxId="box1Id">
        <h1>Box 1</h1>
    </dnd-grid-box>
    <dnd-grid-box :boxId="box2Id">
        <h1>Box 2</h1>
    </dnd-grid-box>
    ...
</dnd-grid-container>
```

## Layout JSON

```javascript
[
    {
        id: 'box-a',
        hidden: false,
        pinned: false,
        position: {
            x: 0,
            y: 0,
            w: 4, // Multiplier for virtual grid width
            h: 2 // Multiplier for virtual grid height
       }
    },
    {
        id: 'box-b',
        hidden: false,
        pinned: false,
        position: {
            x: 4,
            y: 0,
            w: 2,
            h: 1
        }
    },
    ...
]
```

| 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                                           |

## Installation

### Using npm

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

### How to import (using ES6 import)

```javascript
// import Container and Box components
import { Container, Box } from '@dattn/dnd-grid'
// minimal css for the components to work properly
import '@dattn/dnd-grid/dist/dnd-grid.css'
```

### Setup component

```javascript
<script>
export default {
    components: {
        DndGridContainer: Container,
        DndGridBox: Box
    }
}
</script>
```

## License

This project is licensed under [MIT License](http://en.wikipedia.org/wiki/MIT_License)

---
_Source: https://npm.io/package/dnd-grid-external · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._