https://github.com/phphe/draggable-helper
https://github.com/phphe/draggable-helper
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/phphe/draggable-helper
- Owner: phphe
- License: mit
- Created: 2018-04-22T02:41:39.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2021-12-26T15:39:28.000Z (over 3 years ago)
- Last Synced: 2024-03-30T15:01:15.977Z (about 1 year ago)
- Language: TypeScript
- Size: 440 KB
- Stars: 6
- Watchers: 2
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.MD
- License: LICENSE
Awesome Lists containing this project
README
# draggable-helper
A js library to simplify your drag and drop functions. Start with a element, it will expose hooks(drag, moving, drop). You can stop drag, moving and drop by conditions. You can set minTranslate. It uses Typescript.
## features
- support touch simplify(single touch)
- to prevent page scrolling when touch
- expose hooks(drag, moving, drop)
- prevent drag and moving by return false in hook
- set min translate to trigger drag
- set the style of dragging element
- set the class of dragging element
- move the element or move a cloned one
- check if event is triggered by mouse left button
- to prevent text be selected when dragging
- Advance usage: bind to parent element, make children element as trigger element or moved element. Check example.
- Edge scroll. Auto scroll when drag to edge of another scrollable element.
## install
```sh
npm install draggable-helper
```
## usage & api
```js
import draggableHelper from 'draggable-helper'
// dragHandlerEl will be added mouse and touch event listener
const {destroy, options} = draggableHelper(HTMLElement dragHandlerEl, Object opt = {})
```
## types
```ts
import { EventPosition, MouseOrTouchEvent } from "drag-event-service";
export default function (
listenerElement: HTMLElement,
opt?: Options
): {
destroy: () => void;
options: Options;
};
export declare const defaultOptions: {
ingoreTags: string[];
undraggableClassName: string;
minDisplacement: number;
draggingClassName: string;
clone: boolean;
updateMovedElementStyleManually: boolean;
preventTextSelection: boolean;
edgeScrollTriggerMargin: number;
edgeScrollSpeed: number;
edgeScrollTriggerMode: string;
};
export interface Options extends Partial {
triggerClassName?: string | string[];
triggerBySelf?: boolean;
getTriggerElement?: (
directTriggerElement: HTMLElement,
store: Store
) => HTMLElement | undefined;
getMovedOrClonedElement?: (
directTriggerElement: HTMLElement,
store: Store,
opt: Options
) => HTMLElement;
beforeFirstMove?: (store: Store, opt: Options) => boolean | undefined;
afterFirstMove?: (store: Store, opt: Options) => void;
beforeMove?: (store: Store, opt: Options) => boolean | undefined;
afterMove?: (store: Store, opt: Options) => void;
beforeDrop?: (store: Store, opt: Options) => boolean | undefined;
afterDrop?: (store: Store, opt: Options) => void;
preventTextSelection?: boolean;
edgeScroll?: boolean;
edgeScrollTriggerMargin?: number;
edgeScrollSpeed?: number;
edgeScrollTriggerMode?: "top_left_corner" | "mouse";
edgeScrollSpecifiedContainerX?:
| HTMLElement
| ((store: Store, opt: Options) => HTMLElement);
edgeScrollSpecifiedContainerY?:
| HTMLElement
| ((store: Store, opt: Options) => HTMLElement);
onmousedown?: (e: MouseEvent) => void;
onmousemove?: (e: MouseEvent) => void;
onmouseup?: (e: MouseEvent) => void;
ontouchstart?: (e: TouchEvent) => void;
ontouchmove?: (e: TouchEvent) => void;
ontouchend?: (e: TouchEvent) => void;
onClone?: (store: Store, opt: Options) => boolean;
}
export declare const initialStore: {
movedCount: number;
};
declare type InitialStore = typeof initialStore;
export interface Store extends InitialStore {
listenerElement: HTMLElement;
directTriggerElement: HTMLElement;
triggerElement: HTMLElement;
startEvent: MouseOrTouchEvent;
moveEvent: MouseOrTouchEvent;
endEvent: MouseOrTouchEvent;
mouse: EventPosition;
initialMouse: EventPosition;
move: EventPosition2;
movedOrClonedElement: HTMLElement;
movedElement: HTMLElement;
initialPosition: EventPosition2;
initialPositionRelativeToViewport: EventPosition2;
updateMovedElementStyle: () => void;
_isMovingElementCloned: boolean;
}
declare type EventPosition2 = {
x: number;
y: number;
};
export {};
```
## Example
### Advance usage: bind to parent element
Advance usage: bind to parent element, make children element as trigger element or moved element.
```js
import draggableHelper from 'draggable-helper'
const {destroy, options} = draggableHelper(document.body, {
drag(startEvent, moveEvent, store, opt) {
// check trigger el
if (startEvent.target not has class 'your trigger class') {
return false
}
},
// get the element which will be moved
getEl: (dragHandlerEl, store, opt) => get the el which will be moved by `store.startEvent.target`
})
```
## prevent drag
In follow case, drag event will be prevented.
- Event target element is follow
```js
const IGNORE_TRIGGERS = ["INPUT", "TEXTAREA", "SELECT", "OPTGROUP", "OPTION"];
```
- Event target has class `undraggable` or its ancestor till dragHandlerEl has.
- opt.beforeDrag or opt.drag return false