# @hnrq/draggable

> The JavaScript Drag & Drop library your grand-grandparents warned you about.

Latest version **0.0.4** (published 2022-08-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install @hnrq/draggable
pnpm add @hnrq/draggable
yarn add @hnrq/draggable
bun add @hnrq/draggable
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.4 |
| Published | 2022-08-19 |
| First published | 2022-08-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 0 |
| Unpacked size | 130.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 10 |
| Author | Henrique Ramos |
| Maintainers | hnrq |
| Keywords | draggable, drag-and-drop, es6 |

## Links

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

## Recent versions

- 0.0.4 (latest) — 2022-08-19
- 0.0.3 — 2022-08-18
- 0.0.2 — 2022-08-17

## README

[![npm version](https://badge.fury.io/js/@hnrq%2Fdraggable.svg)](https://badge.fury.io/js/@hnrq%2Fdraggable)
[![codecov](https://codecov.io/gh/hnrq/draggable/branch/main/graph/badge.svg?token=LIMBUVCRB9)](https://codecov.io/gh/hnrq/draggable)

<a href="https://shopify.github.io/draggable" title="Visit Draggable website">
  <img src="assets/header.jpg" alt="">
</a>

Get complete control over drag and drop behaviour with Draggable! Draggable abstracts
native browser events into a comprehensive API to create a custom drag and drop experience.
`Draggable` comes with additional modules: `Sortable`, `Droppable`, `Swappable`. Draggable
itself does not perform any sorting behaviour while dragging, but does the heavy lifting, e.g.
creates mirror, emits events, manages sensor events, makes elements draggable.

The additional modules are built on top of `Draggable` and therefore provide a similar API
interface, for more information read the documentation below.

**Features**

- Works with native drag, mouse, touch and force touch events
- Can extend dragging behaviour by hooking into draggables event life cycle
- Can extend drag detection by adding sensors to draggable
- The library is targeted ES6 first

## Table of Contents

- [Table of Contents](#table-of-contents)
- [Install](#install)
- [Browser Compatibility](#browser-compatibility)
- [Documentation](#documentation)
- [Running examples](#running-examples)
- [Contributing](#contributing)

## Install

You can install the library via pnpm.

```
pnpm install @hnrq/draggable --save
```

## Browser Compatibility

<table>
<thead>
  <tr>
    <th>
      <img src="https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" />
    </th>
    <th>
      <img src="https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" />
    </th>
    <th>
      <img src="https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" />
    </th>
    <th>
      <img src="https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" />
    </th>
    <th>
      <img src="https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="Edge" />
    </th>
  </tr>
</thead>
<tbody>
  <tr>
    <td class="tg-0pky">Latest ✔</td>
    <td class="tg-0pky">Latest ✔</td>
    <td class="tg-0pky">Latest ✔</td>
    <td class="tg-0pky">Latest ✔</td>
    <td class="tg-0pky">Latest ✔</td>
  </tr>
</tbody>
</table>

## Documentation

You can find the documentation for each module within their respective directories.

- [Draggable](src/Draggable)
  - [DragEvent](src/Draggable/DragEvent)
  - [DraggableEvent](src/Draggable/DraggableEvent)
  - [Plugins](src/Draggable/Plugins)
    - [Announcement](src/Draggable/Plugins/Announcement)
    - [Focusable](src/Draggable/Plugins/Focusable)
    - [Mirror](src/Draggable/Plugins/Mirror)
    - [MirrorEvent](src/Draggable/Plugins/Mirror/MirrorEvent)
    - [Scrollable](src/Draggable/Plugins/Scrollable)
  - [Sensors](src/Draggable/Sensors)
    - [DragSensor](src/Draggable/Sensors/DragSensor)
    - [ForceTouchSensor](src/Draggable/Sensors/ForceTouchSensor)
    - [MouseSensor](src/Draggable/Sensors/MouseSensor)
    - [Sensor](src/Draggable/Sensors/Sensor)
    - [SensorEvent](src/Draggable/Sensors/SensorEvent)
    - [TouchSensor](src/Draggable/Sensors/TouchSensor)
- [Droppable](src/Droppable)
  - [DroppableEvent](src/Droppable/DroppableEvent)
- [Plugins](src/Plugins)
  - [Collidable](src/Plugins/Collidable)
  - [ResizeMirror](src/Plugins/ResizeMirror)
  - [Snappable](src/Plugins/Snappable)
  - [SwapAnimation](src/Plugins/SwapAnimation)
  - [SortAnimation](src/Plugins/SortAnimation) (Added in: v1.0.0-beta.10)
- [Sortable](src/Sortable)
  - [SortableEvent](src/Sortable/SortableEvent)
- [Swappable](src/Swappable)
  - [SwappableEvent](src/Swappable/SwappableEvent)

## Running examples

To run the `examples` project locally, simply run the following from the `examples` folder:

```
pnpm build && pnpm dev
```

## Contributing

Contributions are more than welcome, the code base is still new and needs more love.
For more information, please checkout [CONTRIBUTING.md](https://github.com/hnrq/draggable/blob/master/CONTRIBUTING.md).

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