# wheel-dragging

> ## Motivation

Latest version **0.1.1** (published 2020-02-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install wheel-dragging
pnpm add wheel-dragging
yarn add wheel-dragging
bun add wheel-dragging
```

## 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.1.1 |
| Published | 2020-02-24 |
| First published | 2020-02-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 15.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | baco16g |
| Maintainers | baco16g |
| Keywords | wheel, drag |

## Links

- npm: https://www.npmjs.com/package/wheel-dragging
- Repository: https://github.com/baco16g/wheel-dragging
- Homepage: https://github.com/baco16g/wheel-dragging#readme
- Issues: https://github.com/baco16g/wheel-dragging/issues
- npm.io page: https://npm.io/package/wheel-dragging

## Recent versions

- 0.1.1 (latest) — 2020-02-24

## README

# wheel-dragging

## Motivation

[The specification of drag and drop](https://html.spec.whatwg.org/multipage/dnd.html#drag-and-drop-processing-model) has the following description.

> From the moment that the user agent is to initiate the drag-and-drop operation, until the end of the drag-and-drop operation, device input events (e.g. mouse and keyboard events) must be suppressed.

A bad consequence of this restriction is that mousewheel can't be used to scroll pages or containers while dragging something.
If you use [HTML Drag and Drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API) to sort a list that owns a large number of items, it will lead to a bad UX.

## Outline

This package provides methods that allows you to turn [WheelEvent](https://developer.mozilla.org/ja/docs/Web/API/WheelEvent) on and off at any time.

## Installation

```
$ npm i wheel-dragging
```

## Usage

```html
<!DOCTYPE html>
<html>
  <body>
    <div id="draggable">
  </body>
</html>
```

```js
import WheelDragging from "wheel-dragging";

// You should create a instance after DOMContentLoaded.
const wheelDragging = new WheelDragging();

// The events you want to monitor need to be added after this method is called.
wheelDragging.init();

const target = document.getElementById("draggable");

target.addEventListener("dragstart", () => {
  wheelDragging.removeWheelListeners();
});
target.addEventListener("dragend", () => {
  wheelDragging.restoreWheelListeners();
});
```

By adding EventMap to the constructor argument, it is possible to omit the method execution.

```js
const wheelDragging = new WheelDragging(["dragstart"], ["dragend"]);
```

## Note

- Events must be assigned after the init method of this package is called.
- Events in Iframes can also be monitored. However, follow the above rules for assigning events.

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