# simple-draggable

> A tiny library to make elements draggable.

Latest version **1.1.11** (published 2025-02-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install simple-draggable
pnpm add simple-draggable
yarn add simple-draggable
bun add simple-draggable
```

## Health

**Score 25/100 (F)** — status: maintenance-mode.

Positive: no vulnerabilities.

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

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.11 |
| Published | 2025-02-14 |
| First published | 2015-11-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 10.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6 |
| Author | Ionică Bizău |
| Maintainers | ionicabizau |
| Keywords | draggable, elements |

## Links

- npm: https://www.npmjs.com/package/simple-draggable
- Repository: https://github.com/IonicaBizau/simple-draggable.js
- Homepage: https://github.com/IonicaBizau/simple-draggable.js#readme
- Issues: https://github.com/IonicaBizau/simple-draggable.js/issues
- npm.io page: https://npm.io/package/simple-draggable

## Recent versions

- 1.1.11 (latest) — 2025-02-14
- 1.1.10 — 2020-08-09
- 1.1.9 — 2019-01-03
- 1.1.8 — 2017-12-25
- 1.1.7 — 2017-09-08
- 1.1.6 — 2017-03-23
- 1.1.5 — 2017-03-20
- 1.1.4 — 2016-10-11
- 1.1.3 — 2016-10-11
- 1.1.2 — 2016-05-25
- 1.1.1 — 2016-01-14
- 1.1.0 — 2015-12-03
- 1.0.0 — 2015-11-12

## README

<!-- Please do not edit this file. Edit the `blah` field in the `package.json` instead. If in doubt, open an issue. -->


















# simple-draggable

 [![Support me on Patreon][badge_patreon]][patreon] [![Buy me a book][badge_amazon]][amazon] [![PayPal][badge_paypal_donate]][paypal-donations] [![Ask me anything](https://img.shields.io/badge/ask%20me-anything-1abc9c.svg)](https://github.com/IonicaBizau/ama) [![Version](https://img.shields.io/npm/v/simple-draggable.svg)](https://www.npmjs.com/package/simple-draggable) [![Downloads](https://img.shields.io/npm/dt/simple-draggable.svg)](https://www.npmjs.com/package/simple-draggable) [![Get help on Codementor](https://cdn.codementor.io/badges/get_help_github.svg)](https://www.codementor.io/@johnnyb?utm_source=github&utm_medium=button&utm_term=johnnyb&utm_campaign=github)

<a href="https://www.buymeacoffee.com/H96WwChMy" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/yellow_img.png" alt="Buy Me A Coffee"></a>







> A tiny library to make elements draggable.

















## :cloud: Installation

```sh
# Using npm
npm install --save simple-draggable

# Using yarn
yarn add simple-draggable
```













## :clipboard: Example



```js
SimpleDraggable(".cursor", {
    onlyX: false
  , onlyY: false
  , onStart: function (event, element) {
        // Do something on drag start
    }
  , onStop: function (event, element) {
        // Do something on drag stop
    }
  , onDrag: function (event, element) {
        // Do something on drag drag
    }
});
```












## :question: Get Help

There are few ways to get help:



 1. Please [post questions on Stack Overflow](https://stackoverflow.com/questions/ask). You can open issues with questions, as long you add a link to your Stack Overflow question.
 2. For bug reports and feature requests, open issues. :bug:
 3. For direct and quick help, you can [use Codementor](https://www.codementor.io/johnnyb). :rocket:







## :memo: Documentation


### `SimpleDraggable(selector, options)`
Initializes the draggable state.

#### Params

- **String** `selector`: The element query selector.
- **Object** `options`: An object containing:
 - `onStart` (Function): A function to run on drag start.
 - `onStop` (Function): A function to run on drag stop.
 - `onDrag` (Function): A function to run on drag move.
 - `onlyX` (Boolean): Drag the element only on the X axis.
 - `onlyY` (Boolean): Drag the element only on the Y axis.














## :yum: How to contribute
Have an idea? Found a bug? See [how to contribute][contributing].


## :sparkling_heart: Support my projects
I open-source almost everything I can, and I try to reply to everyone needing help using these projects. Obviously,
this takes time. You can integrate and use these projects in your applications *for free*! You can even change the source code and redistribute (even resell it).

However, if you get some profit from this or just want to encourage me to continue creating stuff, there are few ways you can do it:


 - Starring and sharing the projects you like :rocket:
 - [![Buy me a book][badge_amazon]][amazon]—I love books! I will remember you after years if you buy me one. :grin: :book:
 - [![PayPal][badge_paypal]][paypal-donations]—You can make one-time donations via PayPal. I'll probably buy a ~~coffee~~ tea. :tea:
 - [![Support me on Patreon][badge_patreon]][patreon]—Set up a recurring monthly donation and you will get interesting news about what I'm doing (things that I don't share with everyone).
 - **Bitcoin**—You can send me bitcoins at this address (or scanning the code below): `1P9BRsmazNQcuyTxEqveUsnf5CERdq35V6`

    ![](https://i.imgur.com/z6OQI95.png)


Thanks! :heart:
























## :scroll: License

[MIT][license] © [Ionică Bizău][website]






[license]: /LICENSE
[website]: https://ionicabizau.net
[contributing]: /CONTRIBUTING.md
[docs]: /DOCUMENTATION.md
[badge_patreon]: https://ionicabizau.github.io/badges/patreon.svg
[badge_amazon]: https://ionicabizau.github.io/badges/amazon.svg
[badge_paypal]: https://ionicabizau.github.io/badges/paypal.svg
[badge_paypal_donate]: https://ionicabizau.github.io/badges/paypal_donate.svg
[patreon]: https://www.patreon.com/ionicabizau
[amazon]: http://amzn.eu/hRo9sIZ
[paypal-donations]: https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=RVXDDLKKLQRJW

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