# touch-dnd-custom-events

> Intercepts touch events (`touchstart`, `touchmove`, `touchend`) on draggable html elements and generates custom drag and drop events instead

Latest version **1.5.0** (published 2017-02-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install touch-dnd-custom-events
pnpm add touch-dnd-custom-events
yarn add touch-dnd-custom-events
bun add touch-dnd-custom-events
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.5.0 |
| Published | 2017-02-08 |
| First published | 2016-10-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Neil Atkinson |
| Maintainers | neilos |

## Links

- npm: https://www.npmjs.com/package/touch-dnd-custom-events
- Repository: https://github.com/Neilos/touch-dnd-custom-events
- Homepage: https://github.com/Neilos/touch-dnd-custom-events#readme
- Issues: https://github.com/Neilos/touch-dnd-custom-events/issues
- npm.io page: https://npm.io/package/touch-dnd-custom-events

## Recent versions

- 1.5.0 (latest) — 2017-02-08
- 1.4.0 — 2017-02-08
- 1.3.0 — 2016-10-21
- 1.2.0 — 2016-10-20
- 1.1.0 — 2016-10-17

## README

# Touch Drag and Drop Custom Events

[![Circle CI](https://circleci.com/gh/Neilos/touch-dnd-custom-events.png?circle-token=6cb8eb4e95c3049d3fe5482e4fd85ee88274b9f1
)](https://circleci.com/gh/Neilos/touch-dnd-custom-events)

## Installation

```
npm install --save touch-dnd-custom-events
```

## Usage
```
import setupTouchDNDCustomEvents from 'touch-dnd-custom-events'

setupTouchDNDCustomEvents()
```

Once the initial setup function is called (`setupTouchDNDCustomEvents()`), touch events (`touchstart` on draggable html elements, `touchmove` during a drag, `touchend` during a drag)  are intercepted and dispatch custom drag and drop events with the same datatransfer interface as html 5 drag and drop events (see https://html.spec.whatwg.org/multipage/interaction.html#datatransfer for details).

The custom event names are as follows.

  * touchdragstart (equivalent of html5 dragstart)
  * touchdrag (equivalent of html5 drag)
  * touchdragenter (equivalent of html5 dragenter)
  * touchdragleave (equivalent of html5 dragleave)
  * touchdragover (equivalent of html5 dragover)
  * touchdrop (equivalent of html5 drop)
  * touchdragend (equivalent of html5 dragend)

Because these custom events have the same interface as html5 drag and drop events, they can be treated the same way as a normal html 5 drag and drop event.

## License

MIT

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