# @mystroken/drag

> Hold and drag library

Latest version **0.2.0** (published 2019-03-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install @mystroken/drag
pnpm add @mystroken/drag
yarn add @mystroken/drag
bun add @mystroken/drag
```

## 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.2.0 |
| Published | 2019-03-13 |
| First published | 2019-03-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 7.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 48 |
| Author | Mystro Ken |
| Maintainers | mystroken |
| Keywords | drag, slider, slide, hold-and-drag, creativecoding |

## Links

- npm: https://www.npmjs.com/package/@mystroken/drag
- Repository: https://github.com/mystroken/drag
- Homepage: https://github.com/mystroken/drag#readme
- Issues: https://github.com/mystroken/drag/issues
- npm.io page: https://npm.io/package/@mystroken/drag

## Alternatives

- [adhdev](https://npm.io/package/adhdev.md) — 11.1K weekly downloads
- [react-slide-button](https://npm.io/package/react-slide-button.md) — 310 weekly downloads
- [better](https://npm.io/package/better.md) — 42 weekly downloads
- [react-native-swipe-image](https://npm.io/package/react-native-swipe-image.md) — 22 weekly downloads
- [nl.fokkezb.pulltorefresh](https://npm.io/package/nl.fokkezb.pulltorefresh.md) — 11 weekly downloads

## Recent versions

- 0.2.0 (latest) — 2019-03-13
- 0.1.1 — 2019-03-13

## README

# :surfer: drag


[![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://github.com/mystroken/drag/issues)
[![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=A%20lightweight%20utility%20to%20do%20%22hold%20and%20drag%22.&url=https://github.com/mystroken/drag&via=mystroken&hashtags=holdanddrag,slider,drag,js,creativecoding,developers)

<blockquote>
A lightweight JavaScript "hold and drag" utility. Vanilla JS - No dependencies.
<br>
Its size is ~619 B (minified and compressed).
</blockquote>

![](https://github.com/mystroken/drag/raw/master/screenshot.gif)

➝ [See the online demo (Advanced example)](https://mystroken.github.io/drag/)

## Usage

```npm install @mystroken/drag``` and start using the **hold and drag** system.

```javascript
import Drag from '@mystroken/drag';

// Elements to listen/move.
const slidable = document.querySelector('#slidable');
const container = document.querySelector('#container');

// Where to store the drag position.
let currentX = 0;
let currentY = 0;

// Initialize the library.
const options = {
  listener: container,
  multiplier: 2
};
const drag = new Drag(options);

// Store the cursor position on move.
drag.on(event => {
  currentX = event.X;
  currentY = event.Y;
});

// Use the cursor position to slide the slidable element.
const move = () => {
  slidable.style.transform = `translate3d(${currentX}px, ${currentY}px, 0px)`;
  requestAnimationFrame(move);
};
requestAnimationFrame(move);
```

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