# drag-and-swap

> Vanilla JS library that allows to swap 2 elements in a page by drag and drop

Latest version **0.0.1** (published 2017-05-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install drag-and-swap
pnpm add drag-and-swap
yarn add drag-and-swap
bun add drag-and-swap
```

## 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.1 |
| Published | 2017-05-19 |
| First published | 2017-05-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | https://github.com/cichys |
| Maintainers | cichys |
| Keywords | es6, library, universal, umd, commonjs |

## Links

- npm: https://www.npmjs.com/package/drag-and-swap
- Repository: https://github.com/cichys/drag-and-swap
- Issues: https://github.com/cichys/drag-and-swap/issues
- npm.io page: https://npm.io/package/drag-and-swap

## Alternatives

- [@mdxeditor/editor](https://npm.io/package/@mdxeditor/editor.md) — 962.4K weekly downloads
- [mmdb-lib](https://npm.io/package/mmdb-lib.md) — 680.9K weekly downloads
- [playcanvas](https://npm.io/package/playcanvas.md) — 36.2K weekly downloads
- [@glw907/cairn-cms](https://npm.io/package/@glw907/cairn-cms.md) — 967 weekly downloads
- [markdown-to-confluence](https://npm.io/package/markdown-to-confluence.md) — 103 weekly downloads

## Recent versions

- 0.0.1 (latest) — 2017-05-19

## README

# drag-and-swap

Vanilla JS library that allows to swap 2 elements in a page by drag and drop

[Demo on Plunker](https://plnkr.co/edit/unb0mgY99oG4ofj1vVgU?p=preview)


## Usage

Initialize library

```javascript
var dragAndSwap = new DragAndSwap({
    containers: ['#swappercontainer', '#swappercontainer2'], // Array of containers
    element: '.swapperbox',                                  // The draggable elements
    isEnabled: false,                                        // Enabled on start - default: true
    swapBetweenContainers: true,                             // Swap between different controllers - default: false
    onChange: function (boxes) {                             // Callback when swap is done
        console.log(boxes);
    }
});
```

Enable or disable manually

```javascript
document.getElementById('enable').onclick = () => {
    dragAndSwap.enable();
};
document.getElementById('disable').onclick = () => {
    dragAndSwap.disable();
};
```


## Build

```
npm run build
npm run dev
```


## License

Released under the terms of MIT License.

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