https://github.com/phphe/drag-event-service
Help to listen both mouse and touch event.
https://github.com/phphe/drag-event-service
Last synced: 3 months ago
JSON representation
Help to listen both mouse and touch event.
- Host: GitHub
- URL: https://github.com/phphe/drag-event-service
- Owner: phphe
- License: mit
- Created: 2018-06-11T14:14:01.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2024-04-15T14:47:39.000Z (about 1 year ago)
- Last Synced: 2025-02-11T11:55:50.572Z (4 months ago)
- Language: TypeScript
- Homepage:
- Size: 264 KB
- Stars: 0
- Watchers: 2
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.MD
- License: LICENSE
Awesome Lists containing this project
README
# drag-event-service
Listen both mouse and touch event. With Typescript definition files. Support Typescript.
同时监听鼠标和触摸事件. 支持 Typescript.
```js
// mapping
const events = {
start: ["mousedown", "touchstart"],
move: ["mousemove", "touchmove"],
end: ["mouseup", "touchend"],
};
```
## install
```sh
npm install drag-event-service --save
```
## usage & api
```js
import DragEventService from "drag-event-service";
DragEventService.on(el, name, handler, { args, mouseArgs, touchArgs });
DragEventService.off(el, name, handler, { args, mouseArgs, touchArgs });
```
- args, mouseArgs and touchArgs should be Array
- The args will pass to addEventListener.
- mouseArgs will pass to mouse event.
- touchArgs will pass to touch event.
- handler(event, currentPosition). The second argument of handler is current position({x, y, pageX, pageY, clientX, clientY, screenX, screenY}). x and y is pageX and pageY.
## example
```js
// 1
DragEventService.on(document, 'start', (e, mouse) => ..., {touchArgs: [{passive: false}]})
DragEventService.on(document, 'move', (e, mouse) => ..., {touchArgs: [{passive: false}]})
DragEventService.on(document, 'end', (e, mouse) => ..., {touchArgs: [{passive: false}]})
// 2
const handler = (e, mouse) => ...
DragEventService.on(document, 'start', handler)
DragEventService.off(document, 'start', handler)
```