【eriko-dragger.js】

version: v1.1.0
last updated: 2020.5.26

Availability

npm install --save eriko-dragger.js

Usage

Example 1

Assign dragger by calling set methods.

import { ErikoDragger } from 'eriko-dragger.js';

var ed = new ErikoDragger();

ed.setContainer('#card-collector');
ed.setTarget('#cards');
ed.setStartEvent(this.handleDragStartEvent);
ed.setMoveEvent(this.handleDragMovingEvent);
ed.setEndEvent(this.handleDragEndEvent);
ed.setDebounce(500);

ed.launch();
ed.removeDragger();

Example 2

Assign dragger by passing parameter.

import { ErikoDragger } from 'eriko-dragger.js';

const option = {
  startEvent: myStartEvent
  moveEvent: myMoveEvent
  endEvent: myEndEvent
  debounce: 500
}

var ed = new ErikoDragger('#card-collector', '#cards', option);

ed.launch();
ed.removeDragger();

Get Drag Info

Use first default parameter.

function myMoveEvent(event) {
  console.log(event);
}

document

container

name | type | optional | default --- | --- | --- | --- containerId | string | no |

target

name | type | optional | default --- | --- | --- | --- targetId | string | no |

option

name | type | optional | default --- | --- | --- | --- startEvent | function | yes | moveEvent | function | yes | endEvent | function | yes | debounce | number | yes | 300

event (default parameter)

name | type | description --- | --- | --- dragStartCoord | object | {x, y} dragMovingCoord | object | {x, y} dragDirection | string | vertical direction + horizontal directoin dragDirectionFromPrev | string | vertical direction + horizontal directoin dragDistance | number | Drag distance from start position dragDistanceFromPrev | number | Drag distance from previous position dragDuration | number | Drag duration dragTranslate | string | {x, y, translate} sourceEvent | object | Original event