# fastdrag

> [![Build Status](https://www.travis-ci.org/qkorbit/fastdrag.svg?branch=master)](https://www.travis-ci.org/qkorbit/fastdrag)

Latest version **0.1.2** (published 2019-07-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install fastdrag
pnpm add fastdrag
yarn add fastdrag
bun add fastdrag
```

## 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.1.2 |
| Published | 2019-07-03 |
| First published | 2019-07-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 352.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | qkorbit |
| Maintainers | qkorbit |
| Keywords | front-end, javascript, typescript, drag, drop, drag-drop, fastdrag, dragging |

## Links

- npm: https://www.npmjs.com/package/fastdrag
- Repository: https://github.com/qkorbit/fastdrag
- Homepage: https://github.com/qkorbit/fastdrag#readme
- Issues: https://github.com/qkorbit/fastdrag/issues
- npm.io page: https://npm.io/package/fastdrag

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 0.1.2 (latest) — 2019-07-03
- 0.1.1 — 2019-07-02
- 0.1.0 — 2019-07-02

## README

# Fastdrag

[![Build Status](https://www.travis-ci.org/qkorbit/fastdrag.svg?branch=master)](https://www.travis-ci.org/qkorbit/fastdrag)

A fast and lovely drag & drop library.

![demo](https://raw.githubusercontent.com/qkorbit/Fastdrag/master/example/show.gif)

## Features

* 👌 Easy to use
* 🚀 Tiny size, <2Kb gziped
* 🤣 Modular, easy to extend
* ⚡️ Only pure JavaScript

## Getting Started

### Installation

You can get it on npm:

```bash
npm install fastdrag --save
```

As a dependency:

```javascript
import Fastdrag from 'Fastdrag'
```

Or via CDN:

```html
<script src="https://unpkg.com/fastdrag@latest/dist/fastdrag.min.js"></script>
```

### Examples

```javascript
let instance = new Fastdrag({
  el: document.getElementById('demo'),
  friction: 2
})
```

Or in a more simple way:

```javascript
let instanceList = Fastdrag.to(document.getElementsByClassName('dragdrag'))
```

## API

|   Methods   |   Description   |
|:--------:|:--------:|
|Fastdrag  | Create the instance  |
|config | Modify the setting |
|destroy | Destroy the instance |
|on | Add eventListener to instance |
|to | Generate instances quickly |

### class Fastdrag

> new Fastdrag(options): Fastdrag Instance

Create the instance.

* options:

|   Parameter   |  Default Value  |   Description   | Type    |
|:--------:|:--------:|:--------:|:--------:|
|el| document.body |The container|HTMLElement|
|friction| 3 |The friction of target|number|
|rotateRange| 60 |The rotate range limit|number|
|scale|1|The scale factor of Container|number|

### config

> config(options): void

Everything can be changed except 'el'.

examples:

```javascript
let instance = new Fastdrag({
  el: document.getElementById('demo'),
  friction: 2
})

instance.config({
  friction: 5
})
```
### destroy

> destroy(): void

Destroy the instance.

examples:

```javascript
let instance = new Fastdrag({
  el: document.getElementById('demo'),
  friction: 2
})

instance.destroy()
```

### to

> to(target, options): Fastdrag Instances

|   Parameter   |  Default Value  |   Description   | Type    |
|:--------:|:--------:|:--------:|:--------:|
|target| document.body |The container|HTMLElement \| HTMLElement[]|
|options| {} |As same as Fastdrag options|object|


### on

> on(event, callback): void

Normally, you can listen the browser's native event on the instance of Fastdrag:

```javascript
let demo = document.getElementById('demo')
let instance = new Fastdrag({
  el: demo,
  friction: 4
})

// Actually, animation is still moving.
demo.addEventListener('dragend', e => {
	console.log('done!')
})

```

But sometimes you need to get more exactly what happened:

```javascript
let demo = document.getElementById('demo')
let instance = new Fastdrag({
  el: demo,
  friction: 4
})

instance.on('end', e => {
  console.log('done!')
})

```

* params:

|   Parameter   |  Default Value  |   Description   | Type    |
|:--------:|:--------:|:--------:|:--------:|
|event| document.body |The event name|string|
|callback| n => n |The callback function|function|

* event list:

|   Event   |   Description   |
|:--------:|:--------:|
|start  | As same as dragstart  |
|move | Every AnimationFrame of motion would trigger it |
|end | Trigger if Animation is stopped |


## Inspiration

Inspired by: https://github.com/ClassicOldSong/Drag.js

## License

[MIT](LICENSE)

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