{"id":19747034,"url":"https://github.com/phphe/draggable-helper","last_synced_at":"2025-04-30T08:32:10.498Z","repository":{"id":57741955,"uuid":"130529258","full_name":"phphe/draggable-helper","owner":"phphe","description":null,"archived":false,"fork":false,"pushed_at":"2021-12-26T15:39:28.000Z","size":451,"stargazers_count":6,"open_issues_count":0,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-03-30T15:01:15.977Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/phphe.png","metadata":{"files":{"readme":"README.MD","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-04-22T02:41:39.000Z","updated_at":"2022-09-27T11:00:37.000Z","dependencies_parsed_at":"2022-09-10T23:41:51.082Z","dependency_job_id":null,"html_url":"https://github.com/phphe/draggable-helper","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phphe%2Fdraggable-helper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phphe%2Fdraggable-helper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phphe%2Fdraggable-helper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phphe%2Fdraggable-helper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/phphe","download_url":"https://codeload.github.com/phphe/draggable-helper/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224202754,"owners_count":17272807,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-12T02:16:44.184Z","updated_at":"2024-11-12T02:16:44.569Z","avatar_url":"https://github.com/phphe.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# draggable-helper\n\nA 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.\n\n## features\n\n- support touch simplify(single touch)\n- to prevent page scrolling when touch\n- expose hooks(drag, moving, drop)\n- prevent drag and moving by return false in hook\n- set min translate to trigger drag\n- set the style of dragging element\n- set the class of dragging element\n- move the element or move a cloned one\n- check if event is triggered by mouse left button\n- to prevent text be selected when dragging\n- Advance usage: bind to parent element, make children element as trigger element or moved element. Check example.\n- Edge scroll. Auto scroll when drag to edge of another scrollable element.\n\n## install\n\n```sh\nnpm install draggable-helper\n```\n\n## usage \u0026 api\n\n```js\nimport draggableHelper from 'draggable-helper'\n// dragHandlerEl will be added mouse and touch event listener\nconst {destroy, options} = draggableHelper(HTMLElement dragHandlerEl, Object opt = {})\n\n```\n\n## types\n\n```ts\nimport { EventPosition, MouseOrTouchEvent } from \"drag-event-service\";\nexport default function (\n  listenerElement: HTMLElement,\n  opt?: Options\n): {\n  destroy: () =\u003e void;\n  options: Options;\n};\nexport declare const defaultOptions: {\n  ingoreTags: string[];\n  undraggableClassName: string;\n  minDisplacement: number;\n  draggingClassName: string;\n  clone: boolean;\n  updateMovedElementStyleManually: boolean;\n  preventTextSelection: boolean;\n  edgeScrollTriggerMargin: number;\n  edgeScrollSpeed: number;\n  edgeScrollTriggerMode: string;\n};\nexport interface Options extends Partial\u003ctypeof defaultOptions\u003e {\n  triggerClassName?: string | string[];\n  triggerBySelf?: boolean;\n  getTriggerElement?: (\n    directTriggerElement: HTMLElement,\n    store: Store\n  ) =\u003e HTMLElement | undefined;\n  getMovedOrClonedElement?: (\n    directTriggerElement: HTMLElement,\n    store: Store,\n    opt: Options\n  ) =\u003e HTMLElement;\n  beforeFirstMove?: (store: Store, opt: Options) =\u003e boolean | undefined;\n  afterFirstMove?: (store: Store, opt: Options) =\u003e void;\n  beforeMove?: (store: Store, opt: Options) =\u003e boolean | undefined;\n  afterMove?: (store: Store, opt: Options) =\u003e void;\n  beforeDrop?: (store: Store, opt: Options) =\u003e boolean | undefined;\n  afterDrop?: (store: Store, opt: Options) =\u003e void;\n  preventTextSelection?: boolean;\n  edgeScroll?: boolean;\n  edgeScrollTriggerMargin?: number;\n  edgeScrollSpeed?: number;\n  edgeScrollTriggerMode?: \"top_left_corner\" | \"mouse\";\n  edgeScrollSpecifiedContainerX?:\n    | HTMLElement\n    | ((store: Store, opt: Options) =\u003e HTMLElement);\n  edgeScrollSpecifiedContainerY?:\n    | HTMLElement\n    | ((store: Store, opt: Options) =\u003e HTMLElement);\n  onmousedown?: (e: MouseEvent) =\u003e void;\n  onmousemove?: (e: MouseEvent) =\u003e void;\n  onmouseup?: (e: MouseEvent) =\u003e void;\n  ontouchstart?: (e: TouchEvent) =\u003e void;\n  ontouchmove?: (e: TouchEvent) =\u003e void;\n  ontouchend?: (e: TouchEvent) =\u003e void;\n  onClone?: (store: Store, opt: Options) =\u003e boolean;\n}\nexport declare const initialStore: {\n  movedCount: number;\n};\ndeclare type InitialStore = typeof initialStore;\nexport interface Store extends InitialStore {\n  listenerElement: HTMLElement;\n  directTriggerElement: HTMLElement;\n  triggerElement: HTMLElement;\n  startEvent: MouseOrTouchEvent;\n  moveEvent: MouseOrTouchEvent;\n  endEvent: MouseOrTouchEvent;\n  mouse: EventPosition;\n  initialMouse: EventPosition;\n  move: EventPosition2;\n  movedOrClonedElement: HTMLElement;\n  movedElement: HTMLElement;\n  initialPosition: EventPosition2;\n  initialPositionRelativeToViewport: EventPosition2;\n  updateMovedElementStyle: () =\u003e void;\n  _isMovingElementCloned: boolean;\n}\ndeclare type EventPosition2 = {\n  x: number;\n  y: number;\n};\nexport {};\n```\n\n## Example\n\n### Advance usage: bind to parent element\n\nAdvance usage: bind to parent element, make children element as trigger element or moved element.\n\n```js\nimport draggableHelper from 'draggable-helper'\nconst {destroy, options} = draggableHelper(document.body, {\n  drag(startEvent, moveEvent, store, opt) {\n    // check trigger el\n    if (startEvent.target not has class 'your trigger class') {\n      return false\n    }\n  },\n  // get the element which will be moved\n  getEl: (dragHandlerEl, store, opt) =\u003e get the el which will be moved by `store.startEvent.target`\n})\n```\n\n## prevent drag\n\nIn follow case, drag event will be prevented.\n\n- Event target element is follow\n\n```js\nconst IGNORE_TRIGGERS = [\"INPUT\", \"TEXTAREA\", \"SELECT\", \"OPTGROUP\", \"OPTION\"];\n```\n\n- Event target has class `undraggable` or its ancestor till dragHandlerEl has.\n- opt.beforeDrag or opt.drag return false\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphphe%2Fdraggable-helper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fphphe%2Fdraggable-helper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphphe%2Fdraggable-helper/lists"}